/*
 * Theme Name: nliautaud (Timber)
 * Description: Theme to use with Timber
 * Author: Upstatement and Nicolas Liautaud
*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html{
  height: 100%;
}
body {
  background: white;
  font: normal 15px/1.4 arial;
  color: #234;
}

img {
  max-width: 100%;
  height: auto;
}
a {
  color: #234;
  text-decoration: none;
}
article a {
  font-style: italic;
  color: #b70505;
}
article a:hover{
  text-decoration: underline;
}

.header,
#content {
  margin: 0 15%;
  max-width: 1100px;
}


@media all and (max-width: 1200px){
  .header,
  #content {
    margin: 0 8%;
  }
  .header {
    text-align: center;
  }
}

.header {
  margin-top: 5vh;
  padding: 3em 0;
  font: normal 1rem/0.9 arial;
}
.header > * {
  display: inline-block;
}
.header a,
#footer a,
.breadcrumb-item {
  display: inline-block;
  padding: .5em .25em;
  margin: 1em;
  border-bottom: 1px solid transparent;
}
.header a {
  text-transform: lowercase;
}
.header h2 {
  font: italic 1em/0.9 arial;
  text-transform: none;
}
.header a:hover,
#footer a:hover,
.current-menu-item a {
  border-bottom-color: inherit;
}
.site-title {
  margin: 0;
  padding: 0;
  font: normal 1em/0.9 arial;
}
.site-title a {
  font-style: normal;
}
.site-title a:hover {
  text-decoration: none;
} {
  display: inline-block;
}
.breadcrumb-sep {
  color: #aaa;
}
.breadcrumb-home a {
    border: 1px solid #eee;
    text-align: center;
    border-radius: 3px;
    min-width: 2em;
}


.nav-main {
  margin: 0 4em;
}
.nav-main ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  list-style: none;
}


#footer {
  position: relative;
  text-align: center;
  padding: 3em 0;
  font-size: .8em;
}
#footer a {
  color: #aaa;
  margin: .25em;
}
#footer p {
  margin: 1em 0;
}


.article-content p,
.article-content ul,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
  display: block;
  text-align: justify;
  max-width: 37rem;
  margin: 0 auto 3rem;
  padding: 0 1.5em;
  word-wrap: break-word;
}
p.nomargin {
  margin: 0 auto;
}
.article-content h2 {
  font: 600 1.2em/1.6 arial;
  text-transform: uppercase;
  color: #234;
  margin-bottom: 1em;
}
.article-content h3 {
  font: 600 1em/1.6 arial;
  text-transform: uppercase;
  color: #234;
  margin-bottom: .5em;
}

.arve-wrapper {
  margin-bottom: 3rem !important;
}
.gallery {
  margin: 0 0 3rem;
  text-align: center;
  font-size: 0;
}
.gallery-item {
  display: inline-block;
  font-size: 1rem;
}
.gallery-columns-1 .gallery-item {
  max-height: 60vmin;
  max-width: 70vmin;
  margin-bottom: 8vh;
}
.gallery-columns-1 .gallery-item:last-of-type {
  margin-bottom: 0;
}
.gallery-columns-2,
.gallery-columns-3,
.gallery-columns-4 {
  display: flex;
  flex-flow: row wrap;
}
.gallery .linebreak {
  width: 100%;
}
.gallery-icon a {
  display: inline-block;
}
.gallery-icon img {
  display: block;
  margin: auto;
  width: auto;
  max-height: 60vmin;
}
.gallery-caption {
  font-size: .8em;
  color: #aaa;
}
@media all and (max-width: 640px){
  .gallery-columns-1 .gallery-item {
    max-width: none;
  }
  .gallery-icon.portrait img {
    max-height: 60vh;
  }
}

.page .page-title,
.category .page-title {
  display: none;
}


.punchline {
  font: 100 italic 1.2em/1.2 monospace;
  text-align: left;
  margin: 4em auto;
}
.blocklist {
  padding: 0;
}
.blocklist li {
  display: inline;
}
.blocklist li:after {
  content: " / ";
  color: #BBB;
}
.blocklist li:last-child:after {
  content: "";
}

.teaseblock {
  font-size: 0;
}

.tease {
  font-size: 1rem;
  display: inline-block;
  width: 25%;
  position: relative;
  padding: .5em;
}
@media all and (max-width: 800px){
  .tease {
    width: 33.33%;
  }
}
@media all and (max-width: 640px){
  .tease {
    width: 50%;
  }
}
.tease a {
  display: block;
  overflow: hidden;
}
.tease .tease-thumb {
  background-size: cover;
  background-position: 50%;
  transition: all 0s;
}
.tease .tease-thumb:before {
  /* ratio of 1:1*/
  content: "";
  display: block;
  padding-top: 100%;
}
.tease .tease-title {
  position: absolute;
  z-index: 9;
  top: .5em; bottom: .5em;left: .5em; right: .5em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  pointer-events: none;
  background: rgba(50,60,70,.5);
  opacity: 0;
  transition: opacity .15s;
  color: #fff;
}
.tease a:hover .tease-title {
  opacity: 1;
}
.tease a:hover .tease-thumb {
  transform: scale(3);
  transition: transform ease-in 15s;
}
.tease .h2 {
  padding: 0.2em 0.5em;
  font: 100 2em/1 arial;
}
.tease .external h2::after {
  content: attr(data-url);
  display: block;
  font: italic .7rem arial;
  color: #ddd;
  margin-top: .5em;
}


.ms-tabs {
  counter-reset: tabs;
}

.ms-tabs .ms-thumb::before {
  counter-increment: tabs;
  content: counter(tabs);
  color: #ccc;
  font: .75em/1.7 arial;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}
.ms-tabs .ms-thumb-frame-selected .ms-thumb::before {
  color: #000;
}




.tags {
  list-style: none;
  margin: 0 0 2em;
}
footer .tags {
  text-align: center;
  margin: 2em 0 0;
}
.tag-item {
  display: inline-block;
  margin: .2em;
  border-bottom: 1px solid transparent;
}
.tag-item a:not(:hover) {
  color: #ccc;
}
.header .tag-item a {
  margin: 0;
}
.tag-item::before {
  content: "#";
  color: #ccc;
  font-family: monospace;
  margin: .1em;
}
.tag-item.current::before,
.tag-item.current a {
  color: #000;
}
.tag-item.current {
  border-bottom-color: #000;
}


div.yuzo_related_post {
    margin-top: 15vh;
    padding-top: 4em;
}
div.yuzo_related_post .yuzo__title {
    text-align: center;
    width: 50%;
    margin: auto;
    border-top: 1px solid #ccc;
    padding: 2em 0;
}
div.yuzo_related_post .yuzo_wraps .relatedthumb{
  width: 25% !important;
  height: auto !important;
}
.yuzo_wraps .yuzo-img {
  width: 100% !important;
  height: auto !important;
  padding-bottom: 100%; /* 1:1 */
}
@media all and (max-width: 640px){
  div.yuzo_related_post .yuzo_wraps .relatedthumb{
    width: 50% !important;
  }
}