@charset "UTF-8";
/* CSS Document */
/*Gallery*/
* {
  box-sizing: border-box;
}

.main{
  max-width: 1920px;
  margin: auto;
  padding:0px 10px 0px 10px;
}
.content h2{padding:0px;margin:0px; font-size:1.0em;}
.content p {padding:0px;margin:0px;}

.row {
/*  margin: 10px -16px;*/
}

/* Add padding BETWEEN each column */
.row,
.row > .column {
/*  padding: 8px;*/
    padding: 4px;
}

/* Create five equal columns that floats next to each other */
.column {
  float: left;
 /* width: 33.33%;*/
   -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  display: none; /* Hide all elements by default */
}

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

/* Content */
.content {
    font-size: 0;
    
    
/*  padding: 10px;*/
}

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

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: white;
  cursor: pointer;
  margin:4px;
}

.btn:hover {
  background-color: #666;
  color:#ffffff;
}

.main .btn.active {
  background-color: #666;
  color: #ffffff;
}

/* Responsive layout - makes a four column-layout instead of four columns */
@media screen and (max-width: 1700px) {
  .column {
    flex: 25%;
    max-width: 25%;
  }
}

/* Responsive layout - makes a three column-layout instead of four columns */
@media screen and (max-width: 1250px) {
  .column {
    flex: 33%;
    max-width: 33%;
  }
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

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