* {
  box-sizing: border-box;
}

body {
  font-family: 'Open Sans', sans-serif;
}

.col-height {
  height: 250px;
}

.col-height-big {
  height: 400px;
}

img.fpImg {
  height: inherit;
  width: inherit;
}

div#hovud {
  width: 100%;
  height: 150px;
  text-align: center;
}

div#hovud h1 {

  color: white;
  font-size: 200%;
  text-transform: uppercase;
  text-shadow: 3px 3px #000000;
}

div#hovud a:link {
  color: white;
  text-decoration: none;
}

div#hovud a:visited {
  color: white;
}

div#hovud a:hover {
  color: #febb2a;
}

ul.navBar {
  padding: 0px;
  color: white;
  text-transform: uppercase;
  text-shadow: 3px 3px #000000;
}

li.navBar {
  text-decoration: none;
  display: inline-block;
  width: 75px;
  text-align: center;
  margin: auto;
}

li.aktiv {
  /* color: black !important;
  text-decoration: underline !important; */
  padding-bottom: 3px;
  border-bottom: 2px solid grey;
}

/* stilsetjing for mobil  */

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

  div#hovud {
    width: 100%;
    height: 230px;
    text-align: center;
  }

  li.navBar {
    text-decoration: none;
    display: block;
    padding-right: 20px;
  }

  .imageContainer {
    display:inline-block;
    width:100%;
    text-align: center;
  }

  div.kantLuft{
    display: none;
  }

  .mobileOneImage {   /* toggle between two and one bigger image on mobile */
    width: 300px;
    height: auto;
    margin: auto;
  }

  .mobileTwoImages {
    width: 140px;
    height: auto;
  }

  .imageDiv {
    display: inline-block;
    text-align: center;
    margin-right: 5px;
    margin-bottom: 20px;
  }
}

@media only screen and (min-width: 768px){

  .imageContainer {
    display:inline-block;
    width:100%;
    text-align: center;
  }

  div.kantLuft{
    width: 15%;
    display: inline;
    float:left;
  }

  .imageDiv {
    display: inline-block;
    height: 250px;
    width: auto;

    text-align: center;
    margin-right: 20px;
    margin-bottom: 20px;
  }

}

/* stil for desktop */

@media only screen and (min-width: 1024px) {
  .imageContainer {
    display:inline-block;
    width:70%;
    text-align: center;
  }

  div.kantLuft{
    width: 15%;
    display: inline;
    padding: 15px;
    float:left;
  }

  .imageDiv {
    display: inline-block;
    height: 280px;
    width: auto;
    text-align: center;
    margin-right: 20px;
    margin-bottom: 20px;
  }
}

@media only screen and (min-width: 1200px) {
  .imageContainer {
    display:inline-block;
    width:70%;
    text-align: center;
  }

  div.kantLuft{
    width: 15%;
    display: inline;
    height: 2000px;
    float:left;
  }

  .imageDiv {
    display: inline-block;
    height: 350px;
    width: auto;
    text-align: center;
    margin-right: 20px;
    margin-bottom: 20px;
  }
}