* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto', Helvetica, sans-serif;
  font-weight: 300;
  letter-spacing: 0.2px;
  color: #222;
}

it {
  font-style: italic;
}

.image_load img {
  opacity: 0;
}

.image_load.loaded img {
  opacity: 1;
}

/* Header */

.header-container {
    margin-left: 5%;
    margin-top: 75px;
    margin-bottom: 75px;
}

.logo {
    font-size: 25px;
    line-height: 29px;
}

/* Nav buttons */

.nav {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: 5%;
    margin-bottom: 20px;
}

.pagelink {
    font-size: 25px;
    line-height: 29px;
    margin-right: 5%;
    margin-bottom: 5px;
    border-bottom: 1px solid;
    border-color: #222;
    transition: border-color .4s;
}

.pagelink:hover {
    border-color: #FFF;
}

a {
    color: #222;
    text-decoration: none;
}

/* Graphics gallery */

.grid-container {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: 4%;
  margin-bottom: 75px;
}

.graphic-grid-item {
  position: relative;
  width: 30%;
  margin: 1%;
  margin-bottom: 20px;
}

#nature13 {
width: 25.1%;  }

#nature20 {
width: 23.6%;  }

#nature21 {
width: 8.35%;  }

#nature2628 {
width: 15.05%; }

#nature29 {
width: 5.77%; }

#nature32 {
width: 26%;  }

#nature33 {
width: 9.72%;  }

#nature37 {
width: 32.7%; }

#nature40 {
width: 27.85%; }

.graphic-grid-item img {
  width: 100%;
}

/* Book covers gallery */

.covers-grid-item {
  position: relative;
  width: 17.2%;
  margin: 1%;
  margin-bottom: 40px;
}

.covers-grid-item img {
  width: 100%;
}

.addborder img {
  border: 1px solid #CCC;
}

/* Hover over images text */

.middle {
  opacity: 0;
  position: absolute;
  top: 0px;
}

.thumbtext {
  font-size: 25px;
  line-height: 30px;
  text-align: left;
}

.smalltext {
  font-size: 20px;
  line-height: 25px;
}

.graphic-grid-item:hover .image {
  opacity: 0;
  -webkit-transition: opacity 0s;
  -ms-transition: opacity 0s;
  transition: opacity 0s;
}

.graphic-grid-item:hover .middle {
  opacity: 1;
}

.covers-grid-item:hover .image {
  -webkit-transition: opacity 0s;
  -ms-transition: opacity 0s;
  opacity: 0;
  transition: opacity 0s;
}

.covers-grid-item:hover .middle {
  opacity: 1;
}

/* Project page */

.project-container {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: 5%;
  padding-top: 1%;
  margin-bottom: 15px;
}

.project-images {
  width: 1100px;
  margin-right: 5%;
}

.project-images img, .project-coverimages img, .project-seriesimage img {
  width: 100%;
  margin-bottom: 20px;
}

.project-coverimages {
  margin-right: 5%;
}

.coverseries-container {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
  -ms-flex-pack: space-between;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 1100px;
  margin-right: 5%;
}

.project-text, .project-covertext {
  width: 300px;
  margin-bottom: 20px;
}

.project-smalltext {
  font-size: 20px;
  line-height: 26px;
}

.project-smalltext a:hover {
  border-bottom: 1px solid;
}

.videoWrapper {
	position: relative;
	padding-bottom: 54%; /* 16:9 */
	padding-top: 25px;
	height: 0;
  margin-bottom: 25px;
}

.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
  border: 0;
}

.arrows {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
  -ms-flex-pack: space-between;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: 5%;
  margin-bottom: 75px;
}

/* About page */

.about-text {
  width: 60%;
  margin-bottom: 75px;
}

.large-paragraph {
    font-size: 25px;
    line-height: 32px;
    border-bottom: 1px solid #DDD;
}

.large-paragraph a:hover {
  border-bottom: 1px solid;
}

/* Mobile Styles */
@media only screen and (max-width: 500px) {

    .grid-container {
      margin-left: 0;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
    }

    .graphic-grid-item, .about-text {
      width: 90%;
    }

    #nature13, #nature20, #nature2628, #nature32, #nature37, #nature40 {
      width: 90%; }

    #nature21, #nature29, #nature33 {
      width: 40%; }

    .covers-grid-item {
      width: 46%;
      margin-bottom: 20px;
    }

    .project-images {
      width: 95%;
      margin-right: 0;
    }

    .project-text, .project-covertext {
      width: 95%;
    }

    .about-text a, .project-container a {
      border-bottom: 1px solid #222;
    }

    .large-paragraph {
        border-bottom: none;
    }

}

/* Tablet Styles */
@media only screen and (min-width: 501px) and (max-width: 1000px) {

  .graphic-grid-item, .project-seriesimage {
    width: 46%;
  }

  #nature13 {
  width: calc(25.1% * 1.54); }

  #nature20 {
  width: calc(23.6% * 1.54); }

  #nature21 {
  width: calc(8.35% * 1.54); }

  #nature2628 {
  width: calc(15.05% * 1.54); }

  #nature29 {
  width: calc(5.77% * 1.54); }

  #nature32 {
  width: calc(26% * 1.54); }

  #nature33 {
  width: calc(9.72% * 1.54); }

  #nature37 {
  width: calc(32.7% * 1.54); }

  #nature40 {
  width: calc(27.85% * 1.54); }

  .covers-grid-item {
    width: 30%;
    margin-bottom: 30px;
  }

  .project-images, .coverseries-container {
    width: 95%;
    margin-right: 0;
  }

  .project-text, .project-covertext {
    width: 95%;
  }

  .about-text {
    width: 90%;
  }

  .about-text a, .project-container a {
    border-bottom: 1px solid #222;
  }

  .large-paragraph {
      border-bottom: none;
  }

}

/* Laptop Styles */
@media only screen and (min-width: 1001px) and (max-width: 1500px) {

  .graphic-grid-item {
    width: 46%;
  }

  #nature13 {
  width: calc(25.1% * 1.54); }

  #nature20 {
  width: calc(23.6% * 1.54); }

  #nature21 {
  width: calc(8.35% * 1.54); }

  #nature2628 {
  width: calc(15.05% * 1.54); }

  #nature29 {
  width: calc(5.77% * 1.54); }

  #nature32 {
  width: calc(26% * 1.54); }

  #nature33 {
  width: calc(9.72% * 1.54); }

  #nature37 {
  width: calc(32.7% * 1.54); }

  #nature40 {
  width: calc(27.85% * 1.54); }

  .covers-grid-item {
    width: 22%;
  }

}

/* Laptop Styles for project view */
@media only screen and (min-width: 1001px) and (max-width: 1600px) {

  .project-images, .coverseries-container {
    width: 65%;
  }

  .project-text {
    width: 250px;
  }

  .project-seriesimage {
    width: 46%
  }

}