/* Image Grid */
/*
*{border: 1px solid green;} 
*/



* {
  box-sizing: border-box;
}



.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  //padding-right:40px;
  //padding-left:40px;
  padding:0px;
  width:82%;
  margin:auto;  
  //background-color: yellow;
  padding-top:230px;
}

.row_categoryNavigation {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  //padding-right:40px;
  //padding-left:40px;
  padding:0px;
  width:82%;
  margin:auto;  
  //background-color: yellow;
  padding-top:20px
}




/* Create three equal columns that sits next to each other */
.column {
  -ms-flex: 33.33%; /* IE10 */
  flex: 33.33%;
  max-width: 33.33%;
  padding: 0px 1% 0 1%;
  //background-color: red;
}


.column img {
  margin-top: 0px; //set to zero for zoom-in effect
  vertical-align: middle;
}



/* Image overlay on hover (from w3 schools)) */

.container {
  position: relative;
  width: 100%;
  overflow: hidden;  
  margin: 0 auto;  
  //padding: 0 0px 50px 0px;
}

.image {
  display: block;
  width: 100%;
  height: auto;
  
}

.image:hover {
  opacity: 0.7;
  transition: 1.0s ease;
  transform: scale(1.1);
}

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

.container:hover .overlay {
  opacity: 0;
}


.klick_class {
  /* Good browsers */
  opacity: 0.3;
}





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



@media only screen and (max-width:375px) {  
 .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
   
 .overlay {  
  height:50px;
  line-height:50px;
  font-size: 15pt;
  //padding: 20px 0 20px 0;
}   

}


/* ---------------- Start RespDes: padding-top for gallery ----------------- */
@media only screen and (max-width:480px) {
.row { 
  padding-top:160px;
}
}
/* ---------------- Start RespDes: padding-top for gallery ----------------- */



/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media only screen and (min-width:376px) and (max-width:768px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width:769px) and (max-width:1024px) {
 .overlay {  
  height:50px;
  line-height:50px;
  font-size: 15pt;
  //padding: 20px 0 20px 0;
}   
    
    
}    

@media only screen and (min-width:1025px) and (max-width:1280px) {
 .overlay {  
  height:60px;
  line-height:60px;
  //padding: 20px 0 20px 0;
}  
    
}







