.best-projects-grid > a {
    display: flex;
    justify-content: center;
    align-items: center;
}

.best-projects-grid > a > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.projects-grid-overview > a {
    display: flex;
    justify-content: center;
    align-items: center;
}

.projects-grid-overview > a > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.projects-grid-discription > a {
    display: flex;
    justify-content: center;
    align-items: center;
}

.projects-grid-discription > a > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.headerbild {
    width: 100%;
    height: auto;
    margin-bottom: 50px;
}

.headerbild:hover {
    
    cursor: crosshair;
}


/* __________MAIN____________________________________________________ */


body 
{
  background-color: rgb(5,5,5);
  font-family: "Courier New";
  font-size: 15px;
  line-height: 1.5;
  padding: 0px;
  margin: 0px;
  color: white;
}


#maincontent
{
  /*background-color: black;*/
  max-width: 80%;
  width: 960px;
  margin-left: auto;
  margin-right: auto;
  margin-top:66px;
}


#header
{
  max-width: 100%;
  width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 20px;
}


/* invert neu */

#stylesheet_dark
{
  background:url(/assets/darkmode_button_dark.png);
  width: 50px;
  height: 50px;
  border: none;
  cursor: not-allowed;
  display: block;
  margin-left: auto;
}




/* ----------FLOLF logo top----------- */


IMG.displayed 
{
/*    -webkit-filter: invert(1); 
  filter: invert(1); */
  display: block;
  margin-left: auto;
  margin-right: auto; 
  margin-bottom: 50px;
  }

IMG.displayed:hover {
   cursor: crosshair;
}


/* Menü - Bar */


.menu 
{
  padding-top: 20px;
  padding-bottom: 50px;
  display: flex;
  justify-content: left;
  align-items: center;
}



.footer 
{
  padding-top: 20px;
  padding-bottom: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
    color: white;
}




header
{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 30px;
}


nav ul
{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
  padding: 0px;
}


nav ul li
{
  list-style: none;
}


nav ul li a
{
  margin: 0 10px;
  text-decoration: none;
  color: white;
  letter-spacing: 2px;
  font-weight: 500;
  transition: 0s;
}


nav ul li a:hover
{
    color:aqua;
    cursor: crosshair;
}


nav ul li a:visited
{
  
}




/* _____Fließtext und Überschriften__________________________________________ */

p
{
color: white;
}


#blocktext p 
{
  width: 880px;
  padding-left: .5em;
  margin-bottom: 30px;
}


#kontakt
{
  width: 400px;
}


#kontakt p
{
  text-align: left;
  padding-left: 10px;
  margin-top: 100px;
  margin-bottom: 100px;
}


#footer 
{   margin-top: 100px;
    text-align: center;
}


h4
{
 margin-bottom: -5px;
 margin-top: 0px;
}



/* ___________INDEX-PAGE____________________________________________ */


/* VIMEO VIDEO */

.video-container
{
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 0;
  height: 0;
  overflow: hidden;
}


.video-container iframe,
.video-container object,
.video-container embed 
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.video-container-wrapper {
  max-width: 100%;
  width: 960px;
  left: 0;
  right:0;
  margin-bottom: 50px;

}



/* ---------------------PICTURE GRIDS---------------------------------------------------------------------------------------------------------------- 


/* ---------Picture Grid INDEX---------- */

.best-projects-grid
{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 250px;
  grid-gap: 10px;
  margin-top: 50px;
  margin-bottom: 30px;
}


.grid-pics-index:hover
{
  filter: none;
  -webkit-filter: none;
  cursor: crosshair;
  color: transparent;
}


.grid-pics-index
{
    filter: url(filters.svg#grayscale);

    filter: url(filters.svg#grayscale) opacity(0.4);
  /* Firefox 3.5+ */
    filter: gray opacity(0.4);
  /* IE6-9 */
    -webkit-filter: grayscale(1) opacity(0.4);
  /* Google Chrome & Safari 6+ */
    -webkit-transition: 0.3 ease-in-out, -webkit-transform 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out, -moz-transform 0.3s ease-in-out;
    transition: 0.3s ease-in-out, -moz-transform 0.3s ease-in-out;
}


.grid-vertical
{
  grid-row: span 2;
  grid-column: span 1;
}




/* _______PROJECTS OVERVIEW PAGE_____________________________________ */

/*______________grid________________*/


.projects-grid-overview
{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 250px;
  grid-auto-flow: dense;
  grid-gap: 15px;
 

}


.grid-pic-projects img:hover
{
  filter: none;
  -webkit-filter: none;
  cursor: crosshair;
}

.grid-pic-projects img:hover + .top-left
{
  display: none;
}

.grid-pic-projects
{
 /* background-color: aquamarine; */
  position: relative;
  text-align: center;
  
}

.grid-pic-projects img
{
 /* background-color: aquamarine; */
  text-align: center;
  filter: url(filters.svg#grayscale);
  filter: url(filters.svg#grayscale) opacity(0.4);
  /* Firefox 3.5+ */
  filter: gray opacity(0.4);
  /* IE6-9 */
  -webkit-filter: grayscale(1) opacity(0.4);
  /* Google Chrome & Safari 6+ */
   -webkit-transition: 0.3 ease-in-out, -webkit-transform 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out, -moz-transform 0.3s ease-in-out;
  transition: 0.3s ease-in-out, -moz-transform 0.3s ease-in-out;  
}


.top-left {
  position: absolute;
  top: -12px;
  left: 8px; 
  font-size: 15px;
}






/* -------------------PROJECTS DISCRIPTION------------------------*/


.projects-grid-discription{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 250px;
  grid-gap: 10px;
  margin-bottom: 30px;
}






/* -------------------------RESPONSIVE------------------------------------------*/



/* Responsive layout -
makes the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 1200px) 
{
  
  #blocktext p 
{
  max-width: 95%;
}
  
}

  
@media screen and (max-width: 800px) {


  
  
  #maincontent
{
    max-width: 80%; 
}

  
  
  #blocktext p 
{
  max-width: 95%;
}
  
  #kontakt 
{
  padding-left: 0px;
  max-width: 95%;
}
  
  
  .best-projects-grid
{
  grid-auto-rows: 150px;
    grid-template-columns: repeat(1, 1fr);
}
    
    
.projects-grid-overview
{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-auto-rows: 150px;
 

}

  

}