/*!
Theme Name: 	Make It Clear
Theme URI: 		http://makeitclear.eu
Description: 	Wordpress template
Version: 		1.1
Author: 		An Endless Supply
Author URI: 	http://anendlesssupply.co.uk
Tags: 			clean, basic
*/
@import url(css/reset.css);
@import url(fonts/icomoon.css);
@import "https://fonts.googleapis.com/css?family=Space+Mono:400,400i";
@import url(fonts/krabbesholm.css);
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

div,
article,
section,
header,
footer,
nav,
li {
  position: relative; }

#menu-main-navigation:after, .group:after {
  content: "";
  display: table;
  clear: both; }

body {
  background: #fff; }

::-moz-selection {
  background: #ff0;
  color: #444; }

::selection {
  background: #ff0;
  color: #444; }

/* ---------------------------------------------------------------------------------------------------------- 
02 SASS Variables -------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------- 
02 Typography -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
html {
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
  html * {
    text-rendering: optimizeLegibility;
    font-weight: 400; }

body {
  font-size: 1rem;
  letter-spacing: 0.04rem;
  word-spacing: -0.04rem;
  background: #dfdfdf; }

body {
  background-image:url('img/made_by_many_portrait.png');
  background-repeat: repeat;
  background-size:80px;
}

body, input, button, textarea, select {
  font-family: "krabbesholmregular", "Space Mono", sans-serif;
  font-weight: 400;
  line-height: 1.55;
  color: #000;
  color:rgba(0,0,0,0.9);
  letter-spacing: 0.04rem;
  word-spacing: -0.04rem; }

input, button, textarea, select {
  border: 0;
  padding: 0.2rem 0.4rem;
  margin: 0;
  transition: background 0.4s ease;
  -webkit-appearance: none;
  border-radius: 0; }

input[type="text"], input[type="email"], input[type="tel"] {
  background: #eee; }

input[type="submit"] {
  color: #fff;
  background: #222; }

input[type="submit"]:hover {
  background: #F44336; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "krabbesholmbold", "Space Mono", sans-serif;
  font-size: 1.4em;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  word-spacing: 0; }

h1 {
  font-size: 2.5em; }

h2 {
  font-size: 2em; }

a {
  color: #F44336;
  outline: 0 !important;
  text-decoration: none;
  transition: background 0.3s ease;
  border-bottom: 1.5px solid #F44336; }

a:hover {
  color: #fff;
  background: #F44336; }

:focus {
  outline: none; }

input:focus::-webkit-input-placeholder {
  color: transparent; }

input:focus:-moz-placeholder {
  color: transparent; }

input:focus::-moz-placeholder {
  color: transparent; }

input:focus:-ms-input-placeholder {
  color: transparent; }

strong, bold {
  font-family: "krabbesholmbold", "Space Mono", sans-serif;
  font-weight: 400; }

em {
  font-family: "Space Mono", sans-serif;
  font-style: italic; }

strong em, strong i, bold em, bold i {
  font-weight: 400;
  font-style: italic; }

em strong, em bold, i strong, i bold {
  font-weight: 400;
  font-style: italic; }

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

/*
Elements
*/
.large {
  font-size: 1.4em; }

.accent {
  color: #F44336; }

.center, .aligncenter {
  text-align: center; }

img.aligncenter {
  margin-left: auto;
  margin-right: auto;
  display: block; }

.left, .alignleft {
  text-align: left; }

.right, .alignright {
  text-align: right; }

.float-right {
  float: right !important; }

.m-t-default {
  margin-top: 0.8rem; }

.m-b-default {
  margin-bottom: 0.8rem; }

.clear {
  clear: both; }

/*
Structure
*/
.col {
  float: left;
  width: 100%; }

.w-1-1 {
  width: 100%; }

.w-1-2 {
  width: 50%; }

.w-1-4 {
  width: 25%; }

.w-3-4 {
  width: 75%; }

.w-1-5 {
  width: 20%; }

.w-2-5 {
  width: 40%; }

.w-3-5 {
  width: 60%; }

.w-4-5 {
  width: 80%; }

.w-1-3 {
  width: 33.333%; }

.w-2-3 {
  width: 66.666%; }

.w-1-12 {
  width: 8.333%; }

.w-2-12 {
  width: 16.666%; }

.w-3-12 {
  width: 24.999%; }

.w-4-12 {
  width: 33.332%; }

.w-5-12 {
  width: 41.666%; }

.w-6-12 {
  width: 49.998%; }

.w-7-12 {
  width: 58.331%; }

.w-8-12 {
  width: 66.664%; }

.w-9-12 {
  width: 74.997%; }

.w-10-12 {
  width: 83.33%; }

.w-11-12 {
  width: 91.663%; }

.w-12-12 {
  width: 99.996%; }

.inner {
  padding-left: 30px;
  padding-right: 30px; }

.container {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  background: #eee; }

/*
Header
*/
.tier.header {
  margin-top: 28px;
  text-align: center;
  padding-top: 1em;
  padding-bottom: 1em;
  background: #fff;
  color: #000;
  color: rgba(0, 0, 0, 0.9);
}
.fixed-header-after {
  height: 28px;
  margin: 0;
  padding: 0; }

.home .header h1, .header a h1 {
  font-family: 'krabbesholmbold',sans-serif;
  margin-bottom: 20px; }

.header a h1 {
  color: #000;
  color: rgba(0, 0, 0, 0.9);
  border-bottom: 0;
  margin-bottom: 0; }

.home .header a h1 {
  margin-bottom: 20px; }

.header a:hover h1 {
  color: #F44336;
  background: transparent; }

nav.menu-main-navigation-container {
  background: #F44336;
  background:#69F0AE;
  background:#fff;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
  border-right: 1px solid #000; }
  nav.menu-main-navigation-container li {
    border-right: 1px solid #ddd;
    border-right: 1px solid rgba(0, 0, 0, 0.9);
    display: inline-block;
    margin: 0;
    padding: 0;
    float: left; }
    nav.menu-main-navigation-container li a {
      padding: 0.25em 0.5em;
      color: #000;
      color: rgba(0, 0, 0, 0.9);
      border-bottom: 0;
      display: block; }
    nav.menu-main-navigation-container li a:hover {
      background: #d00000;
      background: #64FFDA;
      background:#ddd; 
      color: #000; }
  nav.menu-main-navigation-container li:last-child {
   // border-right: 0; }
  nav.menu-main-navigation-container li.current_page_item a {
    background: #d00000; 
    background: #64FFDA; 
    background:#ddd; }

nav.menu-main-navigation-container {
  position: fixed;
  height: 28px;
  top: 0px;
  left: 0px;
  right: 0;
  max-width: 1080px;
  z-index: 1;
  margin: auto; }

/*
Tiers
*/
.tier {
  background:#fff;
  padding-top: 30px;
  padding-bottom: 30px;
  border-left: 1px solid #000;
  border-right: 1px solid #000; 
  border-bottom: 1px solid #000; }
  .tier p {
    margin-bottom: 1em; }
  .tier p:last-of-type {
    margin-bottom: 0; }

/*.tier:last-of-type {
	border-bottom:0;
}*/
.single .tier.header,
.page .tier.header {
  border-bottom: 1px solid #000; }

.home .tier.header {
  border-bottom: 0; }

.tier-share {
  background: #fff;
  color: #000;
  color: rgba(0, 0, 0, 0.9);
  padding-top: 22px;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000; }

.tier-mid {
  background: #ababab;
  color: #ddd; }

.tier-dark {
  background: #fff;
  color: #000;
  color:rgba(0,0,0,0.9); }

.tier.odd {
  background: #eeeeee; 
  background:#fff; }

.tier.even {
  background: #ffffff; }

.tier-header {
  text-align: center; }
  .tier-header h2 {
    margin-bottom: 30px; }

/*
Wall
*/
.wall {
  text-align: center; }

.wall-item {
  width: 100%;
  float: left;
  margin-bottom: 45px;
  font-size: 1.4em; }
.wall-item img {
    max-width: 100%;
    height: auto;
    width: 120px;
    display: block;
    margin: 0 auto 10px; }
.wall-item h3 {
    margin-bottom: 0.5em; }
.wall-item a {
    display: block;
	padding: 0.5em;
	color:#000;
	border-color:#000;
}
.wall-item a:hover {
    //box-shadow: 0 0 10px #F44336;
	background:#fff;
	color:#F44336;
	border-color:#F44336;
}

.lazy {
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0); }

/*
Single
*/
.image {
  margin-bottom: 30px; }
  .image img {
    width: 400px; 
    max-width: 100%; }

/*
Share
*/
.share {
  font-size: 1.4em;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  text-align: center; }
  .share h3 {
    color: #444;
    font-size: 0.6em;
    margin-bottom: 0.5em; }
  .share li {
    display: inline-block;
    padding: 0 10px; }
    .share li a {
      color: #444;
      border: 1px solid #444;
      display: inline-block;
      padding: 0.25em 1.5em; }
    .share li a:hover {
      color: #666;
      color: rgba(0, 0, 0, 0.6);
      background:#eee;
      background: rgba(255,255,255, 0.6); }

/*
Tooltip
*/
.tooltip {
  font-size: 0.5em;
  line-height: 1.3;
  background: #eee;
  color: #000;
  color: rgba(0, 0, 0, 0.9);
  bottom: 100%;
  display: block;
  left: 15%;
  margin: 0 0 10px;
  opacity: 0;
  padding: 0.5rem;
  pointer-events: none;
  position: absolute;
  width: 70%;
  z-index: 101;
  pointer-events: none;
  -webkit-transform: translateY(10px);
  -moz-transform: translateY(10px);
  -ms-transform: translateY(10px);
  -o-transform: translateY(10px);
  transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
  -moz-transition: all .25s ease-out;
  -ms-transition: all .25s ease-out;
  -o-transition: all .25s ease-out;
  transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); }

.tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%; }

.tooltip:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid #eee 10px;
  bottom: -10px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -10px;
  position: absolute;
  width: 0; }

.share a .tooltip {
  opacity: 0;
  pointer-events: none; }

.share a:hover .tooltip {
  opacity: 1;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px); }

/* ---------------------------------------------------------------------------------------------------------- 
02 Flickity -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
.flickity-prev-next-button {
  background: none;
  width: 80px;
  height: 80px;
  opacity: 0;
  transition: opacity 0.5s ease; }
  .flickity-prev-next-button .arrow {
    fill: #444;
    transition: all 0.5s ease; }

.flickity-prev-next-button:hover {
  background: none;
  opacity: 0.9; }
  .flickity-prev-next-button:hover .arrow {
    fill: #000; }

.gallery:hover .flickity-prev-next-button {
  opacity: 0.5; }

.gallery-cell-image {
  transition: opacity 0.4s;
  opacity: 0; }

.gallery-cell-image.flickity-lazyloaded,
.gallery-cell-image.flickity-lazyerror {
  opacity: 1; }

.gallery-image {
  min-width: 150px; }

/*
Footer
*/
.tier-nav {
 // border-top: 1px solid #000; }

.tier-nav a {
  color: #000;
  border-bottom: 1px dotted #0e0; }

.tier-nav a:hover {
  color: #000;
  background: #0e0; }

.tier:last-child {
  border-top:0;
  border-bottom: 1px solid #000; }

.footer {
  text-align: center; }

.edit-button {
  padding: 40px 0;
  font-size: 12px; }
  .edit-button a {
    padding: 12px;
    border: 1px dotted #00e;
    color: #00e; }
  .edit-button a:hover {
    border: 1px solid #0e0;
    color: #0e0;
    background: transparent; }
.edit-link {
  margin-left:30px;
}
body.home .edit-button {
  border-bottom: 1px solid #000; }
/* ---------------------------------------------------------------------------------------------------------- 
03 Media queries (using a mobile-first approach) ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 1170px) {
	.container, 
	nav.menu-main-navigation-container {
		max-width:92%;
	}
}
@media only screen and (min-width: 768px) {
  html {
    font-size: 15px; }

  h1 {
    font-size: 4em; }

  h2 {
    font-size: 3em; }

  .header {
    margin-top: 32px; }

  nav.menu-main-navigation-container, .fixed-header-after {
    height: 32px; }

  .wall-item {
    width: 50%;
    font-size: 1.2em; } }
@media only screen and (min-width: 960px) {
  html {
    font-size: 16.5px; }

  .header {
    margin-top: 34px; }

  nav.menu-main-navigation-container, .fixed-header-after {
    height: 34px; }

  .wall-item {
    width: 33.333%;
    font-size: 1em; } }