* {
  box-sizing: border-box;
}

body {
  font-family: 'Cormorant Garamond', serif;
}

h1 {
  font-family: 'Pinyon Script', serif;
  font-size: 90px;
}

h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', serif;
}

a.btn {
  color: #f2efe8;
  background: rgb(9,30,46);
}

#site-head {
  background: rgb(9,30,46) no-repeat center center;
  background-size: cover;
}

.blog-title {
  font-size: 85px;
}

.post-holder {
  color: #f2efe8;
  background: rgb(9,30,46) no-repeat center center; 
  background-size: cover;
}

.post-holder.odd {
  color: rgb(9,30,46) !important;
  background: #f2efe8 no-repeat center center;
  background-size: cover;
}

article {
  min-height: 400px;
}

#site-head:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #1d192c;
    /* background: rgb(9,30,46); */
    opacity: 0.6;
}

.list-inline {
  position:relative;
  display: inline-table;
  vertical-align: middle;
  list-style: none;
  padding-left: 0;
  padding-right: 0;
  overflow-y: auto;
}

.list-inline > li {
  /* float: left; */
  display: inline-block;
  margin: 0;
  padding: 0;
  letter-spacing  :0px;
}

.list-inline > .bult {
  display: none;
}

/**
 * @bugfix Prevent webkit from removing list semantics
 * https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html
 * 1. Add a non-breaking space
 * 2. Make sure it doesn't mess up the DOM flow
 */
.list-inline > li:before {
  content: "\200B"; /* 1 */
  position: absolute; /* 2 */
}

.photos {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);
}

.photos img {
  width: 100%;
  height: 100%;
}

@media only screen and (max-width: 480px) {
  /* Smartphone view: 1 tile */
  .list-inline > li {
     width: 100%;
  }
}
@media only screen and (max-width: 650px) and (min-width: 481px) {
  /* Tablet view: 2 tiles */
  .list-inline > li {
     width: 50%;
  }
}
@media only screen and (max-width: 1050px) and (min-width: 651px) {
  /* Small desktop / ipad view: 3 tiles */
  .list-inline > li {
     width: 33.3%;
  }
}
@media only screen and (min-width: 1051px) {
  /* Medium desktop: 4 tiles */
  .list-inline > li {
     width: 25%;
  }
}