/* Text */
.w3-exo {
  font-family: "Exo 2";
}

/* Grid */
.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create a colum that sits next to each other */
.column-1 {
  -ms-flex: 100%; /* IE10 */
  flex: 100%;
  max-width: 100%;
  padding: 0 4px;
}

/* Create two equal columns that sits next to each other */
.column-2 {
  -ms-flex: 50%; /* IE10 */
  flex: 50%;
  max-width: 50%;
  padding: 0 4px;
}

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

/* Create four equal columns that sits next to each other */
.column-4 {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

/* Create five equal columns that sits next to each other */
.column-5 {
  -ms-flex: 20%; /* IE10 */
  flex: 20%;
  max-width: 20%;
  padding: 0 4px;
}

.column-1 img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

.column-2 img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

.column-3 img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

.column-4 img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

.column-5 img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

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

/* 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-1
  .column-2,
  .column-3,
  .column-4,
  .column-5 {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}

/* Add parallax effect and gaussian blur */
.w3-parallaxHeader {
  /* The image used */

  /* Full height */
  height: 100%;

  /* Create the parallax scrolling effect */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  /* Add shadow to header */
  -moz-box-shadow: inset 0 0 17px #000000;
  -webkit-box-shadow: inset 0 0 17px #000000;
  box-shadow: inset 0 0 17px #000000;
}

/*-------- iPads (portrait and landscape) --------*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
  .w3-parallaxHeader {
    background-attachment: scroll;
  }
}

@media screen and (min-device-width : 1025px) {
  .w3-parallaxHeader {
    background-attachment: fixed;
  }
}