/*
Theme Name: 	ODriscoll-2017
Theme URI: 		http://old.conorodriscoll.com/
Description: 	A super stripped back thing.
Version: 		1.0
Author: 		Conor O'Driscoll
Author URI: 	http://old.conorodriscoll.com/
Tags: 			design
*/
/* ---------------------------------------------------------------------------------------------------------- 
01 Sensible defaults ----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
/* RESET */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; vertical-align: baseline; background: transparent; }

body { line-height: 1; }

h1, h2, h3, h4, h5, h6 { font-weight: normal; clear: both; }

ol, ul { list-style: none; }

blockquote { quotes: none; }

blockquote:before, blockquote:after { content: ''; content: none; }

del { text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0; }

a img { border: none; }

/* VARIABLES */
::-moz-selection { /* Code for Firefox */ color: #474643; background: rgba(71, 70, 67, 0.1); }

::selection { color: #474643; background: rgba(71, 70, 67, 0.1); }

html, body { background-color: #ffffff; color: #474643; font-size: 17px; line-height: 1.7em; font-family: "stevie-sans", Helvetica, Arial, sans-serif; }

h1, h2, h3, h4, h5, h6 { font-size: 1rem; line-height: 1.7em; font-weight: 600; }

a:link, a:visited { color: #969695; text-decoration: none; border-bottom: 2px solid #FFC300; }
a:hover, a:focus { color: #474643; border-color: #bcbcbb; }

header { width: 33.3333%; box-sizing: border-box; padding: 3rem; height: auto; display: block; position: fixed; top: 0; left: 0; }

.logo h1 { color: #474643; font-weight: 600; }

.home-image { width: 50%; height: 33.33333%; background-color: #e2e2e2; position: absolute; }
.home-image:nth-of-type(1) { top: 0; left: 50%; }
.home-image:nth-of-type(2) { top: 33.3333%; left: 0%; height: 66.6666%; background-color: #474643; }

.container { width: 66.6666%; float: right; box-sizing: border-box; padding: 3rem; position: relative; min-height: 100vh; }

.grey-text { color: #969695; }

.article p { max-width: 36em; }
.article p:last-child { margin-bottom: 0; }

p { margin-bottom: 1.7rem; }

img { max-width: 100%; height: auto; }

.single-title { font-weight: 600; margin-bottom: 5.1rem; }

.external-icon { display: block; width: 0.75em; height: 1.2em; position: absolute; background-image: url("external.svg"); background-size: contain; background-position: center bottom; background-repeat: no-repeat; margin-left: -1.5em; }

.quote, blockquote { display: block; padding: 0 2rem; border-left: 4px solid #eee; color: #969695; }

blockquote { margin-bottom: 1.7em; }

.writing-link, .writing-non-link, .design-link { max-width: 20em; }
.writing-link:last-of-type, .writing-non-link:last-of-type, .design-link:last-of-type { margin-bottom: 0; }

.writing-link, .design-link { margin-bottom: 1.7rem; }

.videoWrapper { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; margin-bottom: 20px; }

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

.article img { display: block; margin-bottom: 1.7rem; width: 36em; }

.divider { max-width: 36em; text-align: center; color: #969695; margin-bottom: 1.7em; }
.divider:before { content: '\2014 \00b7 \2014'; }

.favourites-container { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: baseline; -webkit-align-items: baseline; -ms-flex-align: baseline; align-items: baseline; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -1rem; }

.favourites-item { margin-top: 2rem; width: 20%; display: inline-block; box-sizing: border-box; padding: 1rem; padding-bottom: 0; }
.favourites-item:link, .favourites-item:visited { border: none; }
.favourites-item img { -webkit-transition: 0.3s; transition: 0.3s; box-shadow: 0 0 0 2px rgba(71, 70, 67, 0.1); }
.favourites-item:hover img, .favourites-item:focus img { -webkit-transform: translateY(-1rem); -ms-transform: translateY(-1rem); transform: translateY(-1rem); }

.favourites-text { font-size: 0.8rem; line-height: 1.7em; }
.favourites-text h4 { font-weight: normal; font-size: 0.8rem; line-height: 1.7em; color: #474643; }
.favourites-text span { color: #969695; display: block; }

.filter { display: inline-block; cursor: pointer; }
.filter:hover, .filter:focus { color: #474643; }
.filter:before { content: '|'; color: #e2e2e2; margin: 0 1rem; }
.filter:first-of-type:before { content: none; }
.filter.selected { cursor: default; color: #474643; }

.being-filtered .favourites-item { display: none; }
.being-filtered .in-filter { display: block; }

/*! Lity - v1.4.1 - 2015-08-18 */
.lity { z-index: 9990; position: fixed; top: 0; right: 0; bottom: 0; left: 0; white-space: nowrap; background: #ffffff; background: rgba(255, 255, 255, 0.8); outline: none !important; opacity: 0; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; }

.lity.lity-opened { opacity: 1; }

.lity.lity-closed { opacity: 0; }

.lity * { box-sizing: border-box; }

.lity-wrap { z-index: 9990; position: fixed; top: 0; right: 0; bottom: 0; left: 0; text-align: center; outline: none !important; }

.lity-wrap:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; }

.lity-loader { z-index: 9991; color: #474643; background-color: #ffffff; position: absolute; top: 50%; margin-top: -0.8em; width: 100%; text-align: center; font-size: 14px; font-family: "stevie-sans", Helvetica, Arial, sans-serif; opacity: 0; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; }

.lity-loading .lity-loader { opacity: 1; }

.lity-container { z-index: 9992; position: relative; text-align: left; vertical-align: middle; display: inline-block; white-space: normal; max-width: 100%; max-height: 100%; outline: none !important; }

.lity-content { z-index: 9993; width: 100%; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; }

.lity-loading .lity-content, .lity-closed .lity-content { -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); }

.lity-close { display: none; }

/* Image */
.lity-image img { max-width: 100%; display: block; line-height: 0; border: 0; padding: 20px; }

.lity-hide { display: none; }

.article [data-lity] { cursor: -webkit-zoom-in; border: none; }
.article [data-lity] img { max-width: 100%; width: auto; }

[data-lity]:last-child img { margin-bottom: 0; }

.lity-wrap { cursor: -webkit-zoom-out; }

@media screen and (max-width: 1050px) { .favourites-item { width: 25%; } }
@media screen and (max-width: 850px) { html, body { font-size: 15px; }
  .favourites-item { width: 33.333%; } }
@media screen and (max-width: 650px) { header { width: 100%; padding: 2rem; position: relative; border-bottom: 1px solid #d5d5d5; }
  .home header { border-bottom: none; }
  .container { width: 100%; float: none; padding: 2rem; position: relative; min-height: 0; }
  .single-title { margin-bottom: 1.7rem; }
  .home .container { min-height: 100vh; }
  .external-icon { position: static; margin-left: 0; display: inline-block; margin-right: 0.5rem; }
  .favourites-item { width: 50%; }
  .favourites .br-composition { display: none; }
  .br-composition:nth-of-type(n+2) { display: none; } }