/*
Theme Name: Rain
Theme URI: http://themeforest.net/user/freshface/portfolio
Description: Premium WordPress Theme
Author: freshface
Author URI: http://themeforest.net/user/freshface/portfolio
License: Go to the "license" folder
License URI: Go to the "license" folder
Tags: blog
Text Domain: rain
Version: 1.5
*/
/* ==========================================================================
   1. Icons - Sets up the icon font and respective classes
   ========================================================================== */
/* Import the font file with the icons in it */
@font-face {
  font-family: 'icons';
  src: url("fonts/icons.eot");
  src: url("fonts/icons.eot?#iefix") format("embedded-opentype"), url("fonts/icons.woff") format("woff"), url("fonts/icons.ttf") format("truetype"), url("fonts/icons.svg#icons") format("svg");
  font-weight: normal;
  font-style: normal; }

/* Apply these base styles to all icons */
.icon-ghost, .icon-feed, .icon-twitter, .icon-google-plus, .icon-facebook {
  font-family: 'icons';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  text-decoration: none; }

/* Each icon is created by inserting the corret character into the 
   content of the :before pseudo element. Like a boss. */
.icon-ghost:before {
  content: "\e000"; }

.icon-feed:before {
  content: "\e001"; }

.icon-twitter:before {
  content: "\e002";
  font-size: 1.1em; }

.icon-google-plus:before {
  content: "\e003"; }

.icon-facebook:before {
  content: "\e004"; }

/* ==========================================================================
   2. General - Setting up some base styles
   ========================================================================== */
/* ------------------------ */
/* CLEARING AND OTHER HACKS */
/* ------------------------ */
/* CLEAR BLOCK DIV */
.clear {
  clear: both; }

/* CLEAR INLINE SPAN */
span.clear {
  display: block;
  clear: both;
  width: 1px;
  height: 0.001%;
  font-size: 0px;
  line-height: 0px; }

/* CLEARFIX */
.clearfix:after,
.comment-meta:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0; }

/* RESPONSIVE INDICATOR */
.jqres {
  width: 2000px; }

html {
  height: 100%;
  min-width: 320px;
  max-height: 100%;
	font-size: 62.5%; 
	overflow-x: hidden;
}

body {
  height: 100%;
  max-height: 100%;
  font-family: Droid Serif, Georgia, serif;
  font-size: 1.6rem;
  line-height: 1.5em;
  color: #3A4145;
  width: 100%;
  background-color: #000; 


  }

.background {
  width: 100%;
  height: 100%;
  top:0;
  bottom:0;
  left:0;
  right:0;

  position: fixed;
  z-index: 0;
}

.background:before {
 width: 100%;
  height: 100%;
  top:0;
  bottom:0;
  left:0;
  right:0;

  position: fixed;
  z-index: -1; 

  content: '';

  background: rgb(0,80,111); /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMSUiIHN0b3AtY29sb3I9IiMwMDUwNmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIzMCUiIHN0b3AtY29sb3I9IiMwMDQxNTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMWEyZTMxIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-radial-gradient(center, ellipse cover,  rgba(0,80,111,1) 1%, rgba(0,65,88,1) 30%, rgba(26,46,49,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,rgba(0,80,111,1)), color-stop(30%,rgba(0,65,88,1)), color-stop(100%,rgba(26,46,49,1))); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,80,111,1) 1%,rgba(0,65,88,1) 30%,rgba(26,46,49,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover,  rgba(0,80,111,1) 1%,rgba(0,65,88,1) 30%,rgba(26,46,49,1) 100%); /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover,  rgba(0,80,111,1) 1%,rgba(0,65,88,1) 30%,rgba(26,46,49,1) 100%); /* IE10+ */
  background: radial-gradient(ellipse at center,  rgba(0,80,111,1) 1%,rgba(0,65,88,1) 30%,rgba(26,46,49,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00506f', endColorstr='#1a2e31',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}

.bokeh {
  position: absolute;
  z-index: -1;
  animation: bokehAmbient ease-in-out 3s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  -webkit-animation: bokehAmbient ease-in-out 3s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: bokehAmbient ease-in-out 3s;
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 50% 50%;
  -ms-animation: bokehAmbient ease-in-out 3s;
  -ms-animation-iteration-count: infinite;
  -ms-transform-origin: 50% 50%;
}

.fadeIn {
  animation: bokehIn ease-in-out 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: bokehIn ease-in-out 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: bokehIn ease-in-out 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: bokehIn ease-in-out 1s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: bokehIn ease-in-out 1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}


::-moz-selection {
  color: #ffffff;
  background: #000000;
  text-shadow: none; }

::selection {
  color: #ffffff;
  background: #000000;
  text-shadow: none; }

h1, h2, h3,
h4, h5, h6 {
  text-rendering: optimizeLegibility;
  line-height: 1;
  margin-top: 0;
  font-family: 'Droid Sans', Arial, sans-serif;
  font-weight: 400;
  color: #566160; }

h1 {
  font-size: 3rem;
  line-height: 1.2em;
  letter-spacing: -2px;
  text-indent: -3px; }

h2 {
  font-size: 2.8rem;
  line-height: 1.2em;
  letter-spacing: -1px;
  text-indent: -2px; }

h3 {
  font-size: 2.4rem; }

h4 {
  font-size: 2.0rem; }

h5 {
  font-size: 1.8rem; }

h6 {
  font-size: 1.6rem; }

a {
  color: #4a4a4a;
  transition: color ease 0.3s, border ease 0.3s, background ease 0.3s; }

a:hover {
  color: #57A3E8; }

h1 a, h2 a, h3 a,
h4 a, h5 a, h6 a {
  color: #50585D; }

p, ul, ol {
  margin: 1.6em 0; }

ol ol, ul ul,
ul ol, ol ul {
  margin: 0.4em 0; }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #efefef;
  margin: 3.2em 0;
  padding: 0; }

blockquote {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 1.6em 0 1.6em 0;
  padding: 0 0 0 1.6em;
  border-left: #4a4a4a 0.4em solid; }

blockquote p {
  margin: 0.8em 0;
  font-style: italic; }

blockquote small {
  display: inline-block;
  margin: 0.8em 0 0.8em 1.5em;
  font-size: 0.9em;
  color: #ccc; }

blockquote small:before {
  content: '\2014 \00A0'; }

blockquote cite {
  font-weight: bold; }

blockquote cite a {
  font-weight: normal; }

dl {
  margin: 1.6em 0; }

dl dt {
  float: left;
  width: 180px;
  overflow: hidden;
  clear: left;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: bold;
  margin-bottom: 1em; }

dl dd {
  margin-left: 200px;
  margin-bottom: 1em; }

mark {
  background-color: #ffc336; }

code, tt {
  padding: 1px 3px;
  font-family: Inconsolata, monospace, sans-serif;
  font-size: 0.85em;
  white-space: pre;
  border: 1px solid #E3EDF3;
  background: #F7FAFB;
  border-radius: 2px; }

pre {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 1.6em 0;
  border: 1px solid #E3EDF3;
  width: 100%;
  padding: 10px;
  font-family: Inconsolata, monospace, sans-serif;
  font-size: 0.9em;
  white-space: pre;
  overflow: auto;
  background: #F7FAFB;
  border-radius: 3px; }

pre code, tt {
  font-size: inherit;
  white-space: -moz-pre-wrap;
  white-space: pre-wrap;
  background: transparent;
  border: none;
  padding: 0; }

kbd {
  display: inline-block;
  margin-bottom: 0.4em;
  padding: 1px 8px;
  border: #ccc 1px solid;
  color: #666;
  text-shadow: #fff 0 1px 0;
  font-size: 0.9em;
  font-weight: bold;
  background: #f4f4f4;
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 1px 0 0 white inset; }

table {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 1.6em 0;
  width: 100%;
  max-width: 100%;
  background-color: transparent; }

table th,
table td {
  padding: 8px;
  line-height: 20px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid #efefef; }

table th {
  color: #000; }

table caption + thead tr:first-child th,
table caption + thead tr:first-child td,
table colgroup + thead tr:first-child th,
table colgroup + thead tr:first-child td,
table thead:first-child tr:first-child th,
table thead:first-child tr:first-child td {
  border-top: 0; }

table tbody + tbody {
  border-top: 2px solid #efefef; }

table table table {
  background-color: #fff; }

table tbody > tr:nth-child(odd) > td,
table tbody > tr:nth-child(odd) > th {
  background-color: #f6f6f6; }

table.plain tbody > tr:nth-child(odd) > td,
table.plain tbody > tr:nth-child(odd) > th {
  background: transparent; }

.dropcap {
  float: left;
  font-size: 5.2rem;
  line-height: 4.8rem;
  margin: 0 6px 0 0; }

/* ==========================================================================
   3. Utilities - These things get used a lot
   ========================================================================== */
/* Hides stuff */
.hidden {
  text-indent: -9999px;
  visibility: hidden;
  display: none; }

/* Creates a responsive wrapper that makes our content scale nicely */
.inner {
  position: relative;
  width: 80%;
  max-width: 700px;
  margin: 0 auto; }

/* Centres vertically yo. (IE8+) */
.vertical {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  /* hackyhack */ }

/* ==========================================================================
   4. General - The main styles for the the theme
   ========================================================================== */
/* Big cover image on the home page */
#ccontainer {
  z-index: 0;
  position: fixed;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover; }

#cholder {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden; }

#choverbg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  background-color: #000000; }

#canvas {
  top: 0;
  left: 0;
  position: relative; }

/* Header */
#site-head {
  position: fixed;
  z-index: 1;
  width: 100%;
  top: 0;
  font-family: 'Open Sans', sans-serif; }

body.admin-bar #site-head {
  top: 28px; }

.header-left {
  float: left;
  width: 30%;
  /*display: table;*/
  padding: 0 5.57%;
  background-color: #888888;
  background-color: rgba(0, 0, 0, 0.05);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.logo-wrapper {
  float: left; }

.header-right {
  float: left;
  width: 70%;
  max-width: 950px;
  display: table;
  padding: 0 5.57%;
  background-color: #f6f6f6;
  background-color: rgba(245, 245, 245, 0.9);
  color: #444444;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.header-left,
.header-right {
  height: 90px;
  /* handmade fallback to prevent jumping when JS loads, change to fit your own logo and header height */ }

.nav-toggle {
  width: 50px;
  height: 50px;
  background: red;
  float: right; }

/* Equalizer - original code by http://aniketpant.com/2011/06/pure-css-soundbars/ */
audio.audio-rain {
  display: none; }

@-moz-keyframes stop {
  0% {
	height: 20px; }

  100% {
	height: 4px; } }

@-moz-keyframes hover {
  0% {
	height: 5px; }

  100% {
	height: 20px; } }

@-moz-keyframes move1 {
  0% {
	height: 5px; }

  25% {
	height: 20px; }

  75% {
	height: 15px; }

  100% {
	height: 5px; } }

@-moz-keyframes move2 {
  0% {
	height: 2px; }

  25% {
	height: 12px; }

  75% {
	height: 20px; }

  100% {
	height: 2px; } }

@-moz-keyframes move3 {
  0% {
	height: 7px; }

  25% {
	height: 2px; }

  75% {
	height: 20px; }

  100% {
	height: 7px; } }

@-moz-keyframes move4 {
  0% {
	height: 12px; }

  25% {
	height: 5px; }

  75% {
	height: 22px; }

  100% {
	height: 12px; } }

@-webkit-keyframes stop {
  0% {
	height: 20px; }

  100% {
	height: 4px; } }

@-webkit-keyframes hover {
  0% {
	height: 5px; }

  100% {
	height: 20px; } }

@-webkit-keyframes move1 {
  0% {
	height: 5px; }

  25% {
	height: 20px; }

  75% {
	height: 15px; }

  100% {
	height: 5px; } }

@-webkit-keyframes move2 {
  0% {
	height: 2px; }

  25% {
	height: 12px; }

  75% {
	height: 20px; }

  100% {
	height: 2px; } }

@-webkit-keyframes move3 {
  0% {
	height: 7px; }

  25% {
	height: 2px; }

  75% {
	height: 20px; }

  100% {
	height: 7px; } }

@-webkit-keyframes move4 {
  0% {
	height: 12px; }

  25% {
	height: 5px; }

  75% {
	height: 22px; }

  100% {
	height: 12px; } }

.music-toggle {
  display: none;
  /* showing up is controlled via jQuery */
  cursor: pointer;
  float: right; }

.bars {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 19px;
  height: 20px;
  /* true is 22 */
  position: relative; }

.bars li {
  position: absolute;
  bottom: 0;
  display: block;
  float: left;
  width: 4px;
  background-color: #ffffff;
  -webkit-border-radius: 1px 1px 0px 0px;
  -moz-border-radius: 1px 1px 0px 0px;
  border-radius: 1px 1px 0px 0px;
  -webkit-transition: height 0.4s linear;
  -moz-transition: height 0.4s linear;
  -o-transition: height 0.4s linear;
  transition: height 0.4s linear; }

.bars:first-child {
  margin-left: 0; }

.bars:last-child {
  margin-right: 0; }

.bar1 {
  left: 0px;
  height: 16px;
  -moz-animation: move1 infinite 2s linear;
  -webkit-animation: move1 infinite 2s linear; }

.bar2 {
  left: 5px;
  height: 12px;
  -moz-animation: move2 infinite 4s linear;
  -webkit-animation: move2 infinite 4s linear; }

.bar3 {
  left: 10px;
  height: 18px;
  -moz-animation: move3 infinite 2s linear;
  -webkit-animation: move3 infinite 2s linear; }

.bar4 {
  left: 15px;
  height: 9px;
  -moz-animation: move4 infinite 0.8s linear;
  -webkit-animation: move4 infinite 0.8s linear; }

.hidden {
  height: 300px;
  box-shadow: none !important; }

.music-toggle.music-stopped .bars li {
  height: 4px;
  -moz-animation: stop 0.8s linear;
  -webkit-animation: stop 0.8s linear; }

#mobile-logo {
  display: none;
  position: relative;
  text-align: center;
  padding: 200px 0; }

/* Category Navigation */
#cat-nav {
  position: fixed;
  z-index: 0;
  width: 30%;
  bottom: 0;
  font-family: 'Open Sans', sans-serif;
  color: #ffffff; }

.cat-nav-left {
  float: left;
  width: 100%;
  height: 62px;
  /* handmade fallback to prevent jumping when JS loads, change to fit your own logo and header height */
  display: table;
  padding: 0 11.14%;
  position: relative;
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.3);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.cat-nav-posts {
  text-align: center;
  font-family: Montserrat, Arial, sans-serif;
  text-transform: uppercase;
  font-size: 1.2rem;
  height: 44px;
  overflow: hidden;
  position: relative; }

.cat-nav-post {
  position: absolute;
  top: 1px;
  right: 0;
  bottom: 0;
  left: 0;
  height: 44px;
  line-height: 44px;
  opacity: 0;
  -webkit-transition: -webkit-transform 0s ease-in-out, opacity 0s ease-in-out;
  -moz-transition: -moz-transform 0s ease-in-out, opacity 0s ease-in-out;
  -o-transition: -o-transform 0s ease-in-out, opacity 0s ease-in-out;
  transition: transform 0s ease-in-out, opacity 0s ease-in-out;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0); }

.cat-nav-post.come-from-top {
  opacity: 1;
  left: 30px;
  right: auto;
  text-align: left;
  padding-left: 13px;
  -webkit-transform: translateX(-30px);
  -moz-transform: translateX(-30px);
  -ms-transform: translateX(-30px);
  -o-transform: translateX(-30px);
  transform: translateX(-30px);
  -webkit-transition: -webkit-transform 0.381s ease-in-out, opacity 0.381s ease-in-out;
  -moz-transition: -moz-transform 0.381s ease-in-out, opacity 0.381s ease-in-out;
  -o-transition: -o-transform 0.381s ease-in-out, opacity 0.381s ease-in-out;
  transition: transform 0.381s ease-in-out, opacity 0.381s ease-in-out; }

.cat-nav-post.come-from-bottom {
  opacity: 1;
  right: 30px;
  left: auto;
  text-align: right;
  padding-right: 13px;
  -webkit-transform: translateX(30px);
  -moz-transform: translateX(30px);
  -ms-transform: translateX(30px);
  -o-transform: translateX(30px);
  transform: translateX(30px);
  -webkit-transition: -webkit-transform 0.381s ease-in-out, opacity 0.381s ease-in-out;
  -moz-transition: -moz-transform 0.381s ease-in-out, opacity 0.381s ease-in-out;
  -o-transition: -o-transform 0.381s ease-in-out, opacity 0.381s ease-in-out;
  transition: transform 0.381s ease-in-out, opacity 0.381s ease-in-out; }

.prev-post,
.next-post {
  cursor: pointer;
  font-size: 3.4rem;
  vertical-align: middle;
  height: 44px !important;
  line-height: 44px !important;
  display: block;
  opacity: 0.5;
  overflow: hidden;
  width: 44px;
  text-align: center; }

.prev-post {
  float: left;
  margin-left: -11px; }

.next-post {
  float: right;
  margin-right: -13px; }

.prev-post:hover,
.next-post:hover {
  opacity: 1; }

/* Breadcrumbs */
.breadcrumbs {
  padding: 0;
  margin: 0;
  text-transform: uppercase;
  font-size: 1.2rem; }

.breadcrumbs li {
  float: left;
  list-style: none; }

.breadcrumbs li:after {
  content: "/";
  padding: 0 6px; }

.breadcrumbs li:last-child:after {
  content: ""; }

/* Yo-logo. Yolo-go. Upload one in ghost/settings/ */
#blog-logo {
  float: left;
  margin: 10px 0; }

#blog-logo img {
  display: block;
  max-height: 100px;
  width: auto;
  max-width: 263px;
  line-height: 0; }

#back {
  color: rgba(0, 0, 0, 0.2);
  position: fixed;
  top: 8px;
  left: 8px;
  padding: 6px;
  font-size: 16px; }

/* Navigation Menu */
.menu {
  position: fixed;
  z-index: 1;
  font-size: 18px;
  line-height: 48px;
  top: 0px;
  bottom: 0;
  left: 0;
  width: 30%;
  opacity: 0;
  background-color: black;
  color: #ffffff;
  text-align: center;
  overflow: auto;
  -webkit-transform-origin: 100% 50% 0;
  -moz-transform-origin: 100% 50% 0;
  -ms-transform-origin: 100% 50% 0;
  -o-transform-origin: 100% 50% 0;
  transform-origin: 100% 50% 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transform: perspective(1600px) rotateY(-90deg) rotateX(0deg);
  -moz-transform: perspective(1600px) rotateY(-90deg) rotateX(0deg);
  -ms-transform: perspective(1600px) rotateY(-90deg) rotateX(0deg);
  -o-transform: perspective(1600px) rotateY(-90deg) rotateX(0deg);
  transform: perspective(1600px) rotateY(-90deg) rotateX(0deg);
  -webkit-transition: all 0.381s ease-out;
  -moz-transition: all 0.381s ease-out;
  -o-transition: all 0.381s ease-out;
  transition: all 0.381s ease-out; }

.menu.active {
  opacity: 1;
  -webkit-transform: perspective(1600px) rotateY(0deg) rotateX(0deg);
  -moz-transform: perspective(1600px) rotateY(0deg) rotateX(0deg);
  -ms-transform: perspective(1600px) rotateY(0deg) rotateX(0deg);
  -o-transform: perspective(1600px) rotateY(0deg) rotateX(0deg);
  transform: perspective(1600px) rotateY(0deg) rotateX(0deg); }

.menu:before {
  /* dark top stripe, goes under logo */
  content: "";
  display: block;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: rgba(0, 0, 0, 0.92);
  color: #ffffff;
  padding: 0 11.4%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.menu-inner {
  overflow: hidden; }

.menu-title {
  font-size: 6.2rem;
  margin: 120px 11.4% 0 11.4%;
  padding: 0 10%;
  color: #ffffff; }

.menu ul {
  display: block;
  list-style: none;
  padding: 46px 11.4%;
  margin: 30px 0 30px 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.menu li {
  float: left;
  width: 100%;
  border-bottom: 1px solid #555555;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px 0; }

.menu li:last-child {
  border-bottom: none; }

.menu li:before {
  color: #404040;
  width: 48px;
  display: inline-block;
  display: none; }

.menu li:nth-child(1):before {
  content: "01. "; }

.menu li:nth-child(2):before {
  content: "02. "; }

.menu li:nth-child(3):before {
  content: "03. "; }

.menu li:nth-child(4):before {
  content: "04. "; }

.menu li:nth-child(5):before {
  content: "05. "; }

.menu li:nth-child(6):before {
  content: "06. "; }

.menu li:nth-child(7):before {
  content: "07. "; }

.menu li:nth-child(8):before {
  content: "08. "; }

.menu li:nth-child(9):before {
  content: "09. "; }

.menu li:nth-child(10):before {
  content: "10. "; }

.menu li:nth-child(11):before {
  content: "11. "; }

.menu li:nth-child(12):before {
  content: "12. "; }

.menu li:nth-child(13):before {
  content: "13. "; }

.menu li:nth-child(14):before {
  content: "14. "; }

.menu li:nth-child(15):before {
  content: "15. "; }

.menu li:nth-child(16):before {
  content: "16. "; }

.menu li:nth-child(17):before {
  content: "17. "; }

.menu li:nth-child(18):before {
  content: "18. "; }

.menu li:nth-child(19):before {
  content: "19. "; }

.menu li:nth-child(20):before {
  content: "20. "; }

.menu {
  color: #666666; }

.menu a {
  color: #666666;
  text-decoration: none; }

.menu a:hover {
  color: #ffffff;
  text-decoration: none; }

.menu h2,
.menu h3,
.menu h4 {
  font-family: Montserrat, Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: -2px; }

.menu li.active-item {
  color: #666666; }

.menu li.active-item a {
  color: #ffffff; }

.menu li h3 {
  margin: 0;
  padding: 0;
  font-size: 2.9rem; }

.menu li .post-meta-date {
  font-size: 1.6rem;
  line-height: 2.6rem; }

.menu_button {
  color: #aaaaaa;
  float: left;
  cursor: pointer;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px; }

.menu_button:hover {
  color: #444444; }

.menu_button i {
  font-size: 26px;
  vertical-align: middle;
  padding: 0; }

.menu .menu-author-image {
  margin: 48px auto 40px auto;
  width: 240px;
  height: 240px;
  border: 10px solid #ffffff;
  background-size: cover;
  background-position: center center;
  -webkit-border-radius: 999px;
  -moz-border-radius: 999px;
  -ms-border-radius: 999px;
  -o-border-radius: 999px;
  border-radius: 999px; }

.menu .written-by {
  margin-top: 53px; }

.menu .about-the-author {
  margin-top: 20px; }

.menu .menu-author-bio {
  line-height: 2.7rem;
  margin: 0 11.4% 0 11.4%; }

.menu .menu-author-web {
  margin: 26px 0 0 0; }

.menu .menu-author-web,
.menu .menu-author-mail {
  display: inline-block;
  text-align: center;
  color: #ffffff;
  line-height: 1.8rem;
  font-size: 1.6rem; }

.menu .menu-author-web:hover,
.menu .menu-author-mail:hover {
  text-decoration: underline; }

.menu .menu-author-web i,
.menu .menu-author-mail i {
  margin: 0 9px 0 0;
  color: #666666;
  font-size: 1.6rem; }

/* Primary Navigation */
.primary-navigation {
  text-align: center;
  padding: 80px 0 0 0; }

.primary-navigation ul {
  line-height: 34px; }

.primary-navigation li {
  border-bottom: none;
  float: none;
  display: inline-block;
  padding: 0; }

/* Content Wrapper */
.content {
  width: 70%;
  position: relative;
  padding: 0;
  /*box-shadow: 0 10px 10px rgba(0,0,0,0.5);*/
  margin: 0 0 0 30%;
  float: left;
  max-width: 950px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

body.admin-bar .content {
  margin-top: 28px; }

/* The details of your blog. Defined in ghost/settings/ */
.blog-title {
  margin: 10px 0 10px 0;
  font-size: 5rem;
  letter-spacing: -1px; }

.blog-description {
  margin: 0;
  font-size: 1.8rem;
  line-height: 1.5em;
  font-weight: 300;
  font-family: 'Droid Serif', Georgia, serif;
  letter-spacing: 0; }

/* Share This */
.share-this {
  font-family: FontAwesome;
  font-weight: 700;
  position: absolute;
  bottom: -50px;
  right: 11.14%;
  width: 50px;
  height: 50px;
  color: #ffffff;
  text-align: center;
  cursor: default;
  font-size: 1.8rem; }

.share-this-inner {
  position: absolute;
  bottom: 47px;
  background: #000000;
  display: none;
  padding-top: 7px;
  -webkit-border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
  -ms-border-radius: 4px 4px 0 0;
  -o-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0; }

.share-this:hover .share-this-inner {
  display: block; }

.share-item,
.share-this i {
  width: 50px;
  height: 40px;
  line-height: 40px;
  vertical-align: middle; }

.share-item {
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  font-size: 2rem; }

.share-item:hover {
  opacity: 1;
  color: #ffffff; }

.share-this:hover {
  height: auto;
  bottom: -90px; }

.share-this i {
  position: absolute;
  left: -25px;
  height: 50px;
  line-height: 50px;
  color: rgba(255, 255, 255, 0.4); }

.share-this i:hover {
  color: #ffffff; }

.share-this:hover i {
  display: none; }

.share-this-bm {
  border-right: 25px solid rgba(0, 0, 0, 0.4);
  border-left: 25px solid rgba(0, 0, 0, 0.4);
  border-bottom: 15px solid transparent;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0; }

.share-this:hover .share-this-bm {
  top: -50px;
  height: 10px;
  border-right: 25px solid #000000;
  border-left: 25px solid #000000; }

/* Every post, on every page, gets this style on its <article> tag */
.article_container {
  background: rgba(220, 220, 220, 0.3);
  position: relative; }

.article_container:first-child .post-inner {
  padding-top: 1.6em; }

.single .article_container:last-of-type article {
  margin-bottom: 0;
  -webkit-border-radius: 2px 0 0 0;
  -moz-border-radius: 2px 0 0 0;
  -ms-border-radius: 2px 0 0 0;
  -o-border-radius: 2px 0 0 0;
  border-radius: 2px 0 0 0; }

.page .article_container:last-of-type article {
  margin-bottom: 0; }

body.sharing.page .article_container:last-of-type article {
  margin-bottom: 100px; }

.post {
  position: relative;
  margin: 0 0 12px 0;
  padding: 40px 11.14% 80px 11.14%;
  word-break: break-word;
  hyphens: auto;
  background-color: #ffffff;
  background-color: white;
  -webkit-border-radius: 2px 0 0 2px;
  -moz-border-radius: 2px 0 0 2px;
  -ms-border-radius: 2px 0 0 2px;
  -o-border-radius: 2px 0 0 2px;
  border-radius: 2px 0 0 2px; }

body.sharing .post {
  margin-bottom: 100px; }

.post:first-of-type {
  padding-top: 80px; }

.post:last-of-type {
  padding-bottom: 80px; }

.post-start-sticky {
  float: right;
  margin: 0 0 0 10px; }

.sticky .post-start-sticky:before {
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  content: "\f01b";
  font-size: 3rem;
  opacity: 0.5;
  display: block;
  height: 27px; }

.article_container:last-of-type .post {
  /*margin-bottom: 0;
  @include border-radius(2px 0 0 0);*/ }

.article_container:first-of-type .post .post-inner {
  /*padding-top: 62px;*/
  /* handmade fallback to prevent jumping when JS loads, change to fit your own logo and header height */ }

.article_container:last-of-type .post .post-inner {
  padding-bottom: 0px;
  /* handmade fallback to prevent jumping when JS loads, change to fit your own logo and header height */ }

.post-template .article_container:last-of-type .post .post-inner {
  padding-bottom: 0;
  /* handmade fallback to prevent jumping when JS loads, change to fit your own logo and header height */ }

.post-title-wrapper {
  /*height: 0;
  position: absolute;
  right: 100%;
  width: 100%;*/
  position: fixed;
  top: 38%;
  bottom: auto;
  left: 0;
  text-align: center;
  right: 70%; }

.post-title {
  font-size: 7.4rem;
  word-wrap: break-word;
  line-height: 7.4rem;
  margin: 0;
  font-weight: 700;
  text-transform: uppercase;
  font-family: Montserrat, Arial, sans-serif;
  text-align: center;
  /*letter-spacing: -4px;*/
  opacity: 0.95;
  padding: 0 11.4%;
  font-style: normal;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.post-title,
.post-title a {
  color: #ffffff; }

.post-title a {
  text-decoration: none; }

.post-excerpt p {
  margin: 1.6rem 0 0 0;
  font-size: 0.9em;
  line-height: 1.6em; }

.post-header {
  /*padding: 0 0 1.6em 0;*/ }

.post-start,
.post-end {
  color: #BBC7CC; }

.post-end-comments,
.post-start-date {
  color: #BBC7CC;
  font-family: Montserrat, Arial, sans-serif;
  text-decoration: none; }

.post-start-tags i {
  font-style: normal;
  margin: 0 7px 0 0; }

.post-start-tags {
  float: right;
  font-style: italic; }

.post-start-tags a {
  color: #BBC7CC;
  text-decoration: none; }

.post-start-tags a:hover {
  text-decoration: none;
  color: #57A3E8;
  text-decoration: underline; }

.post-end i {
  margin: 0 4px 0 0; }

.post-end-date {
  float: left; }

.post-end-author {
  float: right;
  font-style: italic; }

.post-end-author a {
  text-decoration: none; }

.post-meta {
  margin: 0 0 5px 0;
  font-size: 1.5rem;
  color: #566160;
  text-align: center; }

.post-meta a {
  color: #566160;
  text-decoration: none; }

.post-meta a:hover {
  text-decoration: underline; }

.user-meta {
  position: relative;
  padding: 0.3rem 40px 0 100px;
  min-height: 77px; }

.user-image {
  position: absolute;
  top: 0;
  left: 0; }

.user-name {
  display: block;
  font-weight: bold; }

.user-bio {
  display: block;
  max-width: 440px;
  font-size: 1.4rem;
  line-height: 1.5em; }

.publish-meta {
  position: absolute;
  top: 0;
  right: 0;
  padding: 4.3rem 0 4rem 0;
  text-align: right; }

.publish-heading {
  display: block;
  font-weight: bold; }

.publish-date {
  display: block;
  font-size: 1.4rem;
  line-height: 1.5em; }

.post-content div {
  max-width: 100% !important; }

nav.pagination {
  overflow: hidden; }

code, tt {
  white-space: normal; }

article {
  position: relative;
  margin: 0 0 12px 0;
  padding: 40px 11.14% 80px 11.14%;
  word-break: break-word;
  hyphens: auto;
  background-color: #ffffff;
  background-color: white;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px 0 0 2px;
  border-radius: 2px 0 0 2px; }

.menu .primary-navigation {
  display: block;
  width: 100%;
  clear: both;
  overflow: visible; }

.left-nav-menu li ul {
  display: none !important; }

.menu .left-nav-menu li {
  width: auto; }

.menu .left-nav-menu li a {
  padding: 0 10px;
  font-size: 15px; }

.posts-slide {
  float: left;
  text-align: center; }

.posts-tab a {
  display: none; }

.posts-tab a.selected {
  display: inline-block; }

body
.menu .pagination {
  margin-bottom: 0; }

/* .menu ul */
.menu .primary-navigation ul {
  margin: 0; }

/* ==========================================================================
   5. Single Post - When you click on an individual post
   ========================================================================== */
/* Tweak the .post wrapper style */
.post-template .post {
  border-bottom: none; }

/* Kill that stylish little circle that was on the border, too */
.post-template .post:after {
  display: none; }

/* Insert some mad padding up in the header for better spacing */
.post-template .post-header {
  padding: 60px 0; }

/* Keep large images within the bounds of the post-width */
.post-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto; }

.post-template .table-of-contents {
  display: none; }

/* The author credit area after the post */
.post-footer {
  position: relative;
  margin: 5.6rem 0 0 0; }

.post-footer,
.post-footer a {
  color: #3A4145; }

.post-footer h4 {
  font-size: 1.8rem;
  margin: 0; }

.post-footer p {
  margin: 1rem 0;
  font-size: 1.1rem;
  line-height: 1.1rem;
  text-align: center; }

/* Create some space to the right for the share links */
.post-footer .author {
  margin-right: 180px; }

/* Drop the share links in the space to the right.
   Doing it like this means it's easier for the author bio
   to be flexible at smaller screen sizes while the share
   links remain at a fixed width the whole time */
.post-footer .share {
  float: right; }

.post-footer .share a {
  text-decoration: none;
  font-size: 1.1rem;
  margin: 0 2px;
  display: inline-block;
  text-align: center;
  vertical-align: middle; }

.post-footer .share a:hover {
  color: #57A3E8; }

.post-footer .tags {
  text-align: left;
  border-top: #3A4145 1px solid;
  padding: 0.8rem 0.1rem;
  margin-bottom: 0; }

.post-footer-share-title {
  text-align: center;
  padding: 0 0 0.2rem 0; }

.post-footer .post-footer-share {
  text-align: center;
  margin: 1rem 0 5rem 0; }

.post-footer-share a {
  text-decoration: none;
  font-size: 3rem;
  margin: 0 2px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  width: 50px;
  height: 50px;
  line-height: 50px;
  border: 2px solid #4A4A4A;
  -webkit-border-radius: 9999px;
  -moz-border-radius: 9999px;
  -ms-border-radius: 9999px;
  -o-border-radius: 9999px;
  border-radius: 9999px; }

.post-footer-share a:hover {
  color: #569cdc;
  border-color: #569cdc; }

/* WORDPRESS DEFAULT INSERT IMAGE CLASSESSS */
.alignnone {
  margin: 5px 20px 0 0 !important;
  display: inline-block !important; }

.aligncenter {
  display: block;
  margin: 5px auto 0 auto !important; }

.alignright {
  float: right;
  margin: 5px 0 30px 20px !important;
  max-width: 100%; }

.alignleft {
  float: left;
  margin: 5px 20px 30px 0 !important;
  max-width: 100%; }

.wp-caption.alignnone {
  margin: 5px 0 30px 0; }

.wp-caption.alignleft {
  margin: 5px 20px 30px 0; }

.wp-caption.alignright {
  margin: 5px 0 30px 20px; }

.wp-caption {
  width: auto !important;
  font-style: italic; }

.wp-caption-text {
  font-size: 1.4rem;
  margin: 0;
  padding: 0; }

#comments {
  padding: 30px 0 0 0;
  font-size: 1.5rem; }

#comments ul {
  list-style: none;
  padding-left: 40px;
  border-top: 1px solid #efefef; }

#comments > ul {
  padding-left: 0; }

#comments li {
  border-bottom: 1px solid #efefef; }

#comments .children li:last-child {
  border-bottom: none; }

#comments article {
  padding: 20px 0 10px 0;
  background: none; }

#comments .avatar {
  margin: -7px 0 0 -100px;
  float: left;
  -webkit-border-radius: 999px;
  -moz-border-radius: 999px;
  -ms-border-radius: 999px;
  -o-border-radius: 999px;
  border-radius: 999px; }

#comments .comment-meta {
  margin-left: 100px; }

.form-allowed-tags {
  display: none; }

#comments .comment-metadata > a {
  text-decoration: none; }

#comments .comment-content {
  word-wrap: break-word; }

#comments .comment-content p {
  margin: 0.8em 0; }

#comments .comment-edit-link {
  margin: 0 0 0 6px; }

#comments .comment-edit-link,
#comments .comment-reply-link,
#respond .logged-in-as a:last-child,
#respond #cancel-comment-reply-link,
#respond input[type=submit] {
  background-color: #ffffff;
  color: #BBC7CC;
  border: none;
  -webkit-appearance: none;
  text-decoration: none;
  padding: 0;
  -webkit-transition: color 0.3s ease, border 0.3s ease, background 0.3s ease;
  -webkit-transition-delay: 0s, 0s, 0s;
  -moz-transition: color 0.3s ease 0s, border 0.3s ease 0s, background 0.3s ease 0s;
  -o-transition: color 0.3s ease 0s, border 0.3s ease 0s, background 0.3s ease 0s;
  transition: color 0.3s ease 0s, border 0.3s ease 0s, background 0.3s ease 0s; }

#respond input[type=submit] {
  font-family: Montserrat, Arial, sans-serif; }

#respond #cancel-comment-reply-link {
  margin-left: 4px;
  font-size: 1.5rem;
  font-family: Droid Serif, Georgia, serif; }

#comments .comment-reply-link {
  position: relative; }

#comments .comment-reply-link:hover:after {
  font-family: FontAwesome;
  content: "\f112";
  position: absolute;
  right: -18px;
  top: -3px;
  font-size: 1.2rem; }

#comments .comment-edit-link:hover,
#comments .comment-reply-link:hover,
#respond .logged-in-as a:last-child:hover,
#respond #cancel-comment-reply-link:hover,
#respond input[type=submit]:hover {
  border-color: #333333;
  color: #333333;
  cursor: pointer; }

#comments .bypostauthor .reply:after {
  content: "Author";
  text-transform: uppercase;
  color: #ffffff;
  background: #BBC7CC;
  float: right;
  font-size: 1.1rem;
  font-family: Montserrat, Arial, sans-serif;
  line-height: 14px;
  padding: 0 2px; }

#respond input[type=submit] {
  padding: 12px 22px;
  background-color: #333333;
  color: #ffffff; }

#respond input[type=submit]:hover {
  color: #aaaaaa; }

#comments .comment-author {
  padding-top: 7px; }

#comments .comment-author .fn a {
  text-decoration: none; }

#comments time {
  color: #BBC7CC;
  -webkit-transition: color 0.3s ease, border 0.3s ease, background 0.3s ease;
  -webkit-transition-delay: 0s, 0s, 0s;
  -moz-transition: color 0.3s ease 0s, border 0.3s ease 0s, background 0.3s ease 0s;
  -o-transition: color 0.3s ease 0s, border 0.3s ease 0s, background 0.3s ease 0s;
  transition: color 0.3s ease 0s, border 0.3s ease 0s, background 0.3s ease 0s; }

#comments time:hover {
  color: #333333; }

#respond {
  padding: 30px 0 20px 0;
  font-size: 1.5rem; }

#respond h3 small {
  position: relative;
  top: -3px;
  margin-left: 6px; }

#respond .logged-in-as a:last-child {
  margin-left: 6px; }

input[type=text],
input[type=url],
input[type=email],
textarea {
  padding: 8px;
  width: 100%;
  border: 1px solid #BBC7CC;
  margin-top: 7px;
  -webkit-appearance: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

textarea {
  line-height: 1.5; }

input[type=text]:focus,
input[type=url]:focus,
input[type=email]:focus,
textarea:focus,
input[type=text]:active
input[type=url]:active
input[type=email]:active
textarea:active {
  border-color: #333333; }

table {
  font-size: 1.4rem; }

/* ==========================================================================
   6. Third Party Elements - Embeds from other services
   ========================================================================== */
/* Github */
.gist table {
  margin: 0;
  font-size: 1.4rem; }

.gist .line-number {
  min-width: 25px;
  font-size: 1.1rem; }

/* ==========================================================================
   7. Pagination - Tools to let you flick between pages
   ========================================================================== */
/* The main wrapper for our pagination links */
.pagination {
  position: relative;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 1.2rem;
  font-size: 1.2rem;
  text-transform: uppercase;
  line-height: 2.7rem;
  color: #ffffff;
  text-align: center;
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 0 11.14% 0 11.14%; }

.pagination a {
  color: #ffffff; }

.menu .pagination {
  background-color: transparent;
  margin-bottom: 120px; }

/* Push the previous/next links out to the left/right */
.older-posts,
.newer-posts {
  position: absolute;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  display: block;
  font-size: 3.4rem;
  width: 44px;
  height: 44px !important;
  line-height: 44px !important;
  opacity: 0.5;
  overflow: hidden;
  text-align: center;
  vertical-align: middle;
  margin: 9px 0 0 0; }

.older-posts:hover,
.newer-posts:hover {
  opacity: 1;
  text-decoration: none !important; }

.older-posts {
  right: 11.14%;
  margin-right: -13px; }

.page-number {
  display: inline-block;
  padding: 17px 0 18px 0;
  opacity: 0.5; }

.newer-posts {
  left: 11.14%;
  margin-left: -11px; }

.older-posts:hover,
.newer-posts:hover {
  border-color: #9EABB3; }

.prev-next-inpost-wrapper {
  font-size: 1rem; }

.prev-next-inpost-wrapper .prev-inpost {
  float: left; }

.prev-next-inpost-wrapper .next-inpost {
  float: right; }

.gallery img {
  border: none !important; }

/* ==========================================================================
   8. Footer - The bottom of every page
   ========================================================================== */
.site-footer {
  position: relative;
  margin: 8rem 0 0 0;
  padding: 4rem 0;
  border-top: #EBF2F6 1px solid;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.3rem;
  line-height: 1.7em;
  color: #BBC7CC;
  text-align: center;
  background: #F7FAFB; }

.site-footer a {
  color: #BBC7CC;
  text-decoration: underline; }

.site-footer a:hover {
  color: #50585D; }

.poweredby .icon-ghost {
  font-weight: 700;
  text-decoration: none; }

.poweredby .icon-ghost:hover {
  text-decoration: none; }

.poweredby .icon-ghost:before {
  font-size: 1rem;
  margin-right: 0.2em; }

/* The subscribe icon on the footer */
.subscribe {
  width: 28px;
  height: 28px;
  position: absolute;
  top: -14px;
  left: 70%;
  margin-left: -15px;
  border: #EBF2F6 1px solid;
  text-align: center;
  line-height: 2.4rem;
  border-radius: 50px;
  background: #fff;
  transition: box-shadow 0.5s; }

/* The RSS icon, inserted via icon font */
.subscribe:before {
  color: #D2DEE3;
  font-size: 10px;
  position: absolute;
  top: 2px;
  left: 9px;
  font-weight: bold;
  transition: color 0.5s ease; }

/* Add a box shadow to on hover */
.subscribe:hover {
  box-shadow: rgba(0, 0, 0, 0.05) 0 0 0 3px;
  transition: box-shadow 0.25s; }

.subscribe:hover:before {
  color: #50585D; }

/* CSS tooltip saying "Subscribe!" - initially hidden */
.tooltip {
  opacity: 0;
  display: inline-block;
  padding: 4px 8px 5px 8px;
  position: absolute;
  top: -23px;
  left: -23px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 1em;
  text-align: center;
  background: #50585D;
  border-radius: 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  transition: opacity 0.3s ease, top 0.3s ease; }

/* The little chiclet arrow under the tooltip, pointing down */
.tooltip:after {
  content: "";
  border-width: 5px 5px 0 5px;
  border-style: solid;
  border-color: #50585D transparent;
  display: block;
  position: absolute;
  bottom: -4px;
  left: 70%;
  margin-left: -5px;
  z-index: 220;
  width: 0; }

/* On hover, show the tooltip! */
.subscribe:hover .tooltip {
  opacity: 1;
  top: -33px; }

#mobile-header {
  display: none;
  margin: 20px 10% 0 10%;
  max-width: none;
  width: 80%;
  position: relative; }

.mobile-menu-toc-button {
  display: none;
  margin: 0 5%;
  max-width: none;
  width: 90%; }

.mobile-menu-toc-button .menu_button {
  float: right;
  margin-top: 20px; }

.mobile-menu-toc-button .menu_button i {
  font-size: 40px;
  color: #666666; }

.mobile-menu-toc-button .menu_button i:hover {
  color: #ffffff; }

/* Buttons */
input[type=submit],
input[type=button],
input[type=reset],
input[type=image],
input[type=file] {
  padding: 12px 22px;
  background-color: #333333;
  color: #ffffff;
  border: none;
  -webkit-appearance: none;
  font-family: Montserrat, Arial, sans-serif; }

input[type=submit]:hover,
input[type=button]:hover,
input[type=reset]:hover,
input[type=image]:hover,
input[type=file]:hover {
  color: #aaaaaa; }

/* Contact Form 7 */
div.wpcf7-response-output {
  margin: -1em 0 0 0;
  padding: 0;
  border: none;
  color: red; }

.wpcf7 .ajax-loader {
  margin-top: 10px; }

.wpcf7-not-valid-tip {
  margin-top: 5px; }

input.wpcf7-not-valid,
input.wpcf7-not-valid:active,
input.wpcf7-not-valid:focus {
  border: 1px solid red; }

/* About page */
body.page-template-page-about-php .content {
  background: rgba(0, 0, 0, 0.85);
  min-height: 100%; }

body.page-template-page-about-php article,
body.page-template-page-about-php .article_container {
  background: none; }

body.page-template-page-about-php .header-right {
  background: #000000;
  background: rgba(0, 0, 0, 0.2); }

body.page-template-page-about-php .share-this {
  display: none; }

body.page-template-page-about-php .menu_button {
  color: #ffffff; }

body.page-template-page-about-php .post-header {
  padding: 0;
  margin: 0; }

body.page-template-page-about-php .post-content {
  text-align: center;
  color: #666666;
  margin-top: 60px;
  font-size: 1.8rem;
  line-height: 2.7rem; }

body.page-template-page-about-php .about-image {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  border: 10px solid #ffffff;
  -webkit-border-radius: 999px;
  -moz-border-radius: 999px;
  -ms-border-radius: 999px;
  -o-border-radius: 999px;
  border-radius: 999px;
  width: 240px;
  height: 240px;
  margin: 48px auto 40px auto; }

body.page-template-page-about-php h3.headline {
  font-family: Montserrat,Arial,sans-serif;
  font-weight: 700;
  letter-spacing: -2px;
  text-transform: uppercase;
  color: #ffffff;
  font-size: 6.36rem;
  line-height: 6.36rem;
  margin: 33px 11.4% 0 11.4%; }

body.page-template-page-about-php .article_container:last-of-type article {
  padding-bottom: 0; }

ul.about-menu {
  margin: 0;
  text-align: center;
  padding: 60px 4px 0 0;
  font-size: 1.6rem;
  line-height: 3rem; }

ul.about-menu li {
  border-bottom: none;
  float: none;
  display: inline-block;
  margin: 0;
  padding: 0; }

ul.about-menu li:before {
  content: "|";
  font-weight: 400;
  opacity: 0.3; }

ul.about-menu li:first-child:before {
  content: ""; }

ul.about-menu a {
  text-decoration: none;
  margin: 0 10px;
  color: #666666; }

ul.about-menu a:hover {
  color: #ffffff; }

body.page-template-page-about-php input[type=text],
body.page-template-page-about-php input[type=url],
body.page-template-page-about-php input[type=email],
body.page-template-page-about-php textarea {
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.8);
  border: 1px solid #222222;
  margin-top: 7px;
  color: #cccccc; }

body.page-template-page-about-php input[type=text]:active, body.page-template-page-about-php input[type=text]:focus,
body.page-template-page-about-php input[type=url]:active, body.page-template-page-about-php input[type=url]:focus,
body.page-template-page-about-php input[type=email]:active, body.page-template-page-about-php input[type=email]:focus,
body.page-template-page-about-php textarea:active, body.page-template-page-about-php textarea:focus {
  border: 1px solid #444444; }

body.page-template-page-about-php input.wpcf7-not-valid,
body.page-template-page-about-php input.wpcf7-not-valid:active,
body.page-template-page-about-php input.wpcf7-not-valid:focus {
  border: 1px solid #FF0000; }

body.page-template-page-about-php input[type="submit"],
body.page-template-page-about-php input[type="button"],
body.page-template-page-about-php input[type="reset"],
body.page-template-page-about-php input[type="image"],
body.page-template-page-about-php input[type="file"] {
  background-color: #222222;
  color: #999999; }

body.page-template-page-about-php input[type="submit"]:hover,
body.page-template-page-about-php input[type="button"]:hover,
body.page-template-page-about-php input[type="reset"]:hover,
body.page-template-page-about-php input[type="image"]:hover,
body.page-template-page-about-php input[type="file"]:hover {
  color: #ffffff; }

body.page-template-page-about-php .wpcf7-response-output {
  margin-bottom: 20px; }

body.page-template-page-about-php .post-content h1,
body.page-template-page-about-php .post-content h2,
body.page-template-page-about-php .post-content h3,
body.page-template-page-about-php .post-content h4,
body.page-template-page-about-php .post-content h5,
body.page-template-page-about-php .post-content h6 {
  color: #ffffff;
  font-family: Montserrat, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 40px; }

img.wpcf7-captchac {
  margin-bottom: -15px; }

.wpcf7 .ajax-loader {
  display: none; }

/* ==========================================================================
   9. Media Queries - Smaller than 900px
   ========================================================================== */
@media only screen and (max-width: 900px) {
  /* RESPONSIVE INDICATOR */
  .jqres {
	width: 900px; }

  body.admin-bar {
	padding-top: 32px; }

  .sticky .post-start-sticky:before {
	font-size: 2.2rem;
	height: 20px; }

  #site-head {
	display: none; }

  #mobile-header {
	display: block; }

  body.admin-bar #mobile-header {
	padding-top: 32px; }

  #mobile-header .menu_button {
	margin: 8px 0;
	color: #ffffff;
	opacity: 0.5; }

  #mobile-header .menu_button:hover {
	opacity: 1; }

  .mobile-menu-toc-button {
	display: block; }

  h4.menu-title {
	font-size: 4.4rem;
	line-height: 4.4rem; }

  .menu li h3 {
	font-size: 2.2rem;
	line-height: 2.4rem; }

  #cat-nav {
	display: none; }

  blockquote {
	margin-left: 0; }

  #mobile-logo {
	display: block; }

  .dropcap {
	font-size: 5rem;
	line-height: 4.6rem;
	margin: 0 4px 0 0; }

  .content {
	width: 80%;
	max-width: none;
	margin: 20px 10% 0 10%; }

  .article_container:last-of-type .post .post-inner {
	padding-bottom: 0px; }

  .post:first-of-type {
	padding-top: 60px; }

  .post {
	margin-bottom: 30px;
	padding-right: 8%;
	padding-left: 8%; }

  .post:last-of-type {
	padding-bottom: 40px; }

  .post-title-wrapper {
	position: static;
	margin-bottom: 4rem;
	margin-top: 5rem; }

  .post-title,
  .post-title a {
	color: #333638; }

  .post-title {
	font-size: 3.6rem;
	line-height: 3.6rem;
	padding: 0;
	text-align: left; }

  .blog-title {
	font-size: 4rem;
	letter-spacing: -1px; }

  .post-title-wrapper {
	margin-bottom: 0rem;
	margin-top: 0rem; }

  .blog-description {
	font-size: 1.7rem;
	line-height: 1.5em; }

  .post {
	font-size: 0.9em;
	line-height: 1.6em; }

  .post-template .post {
	padding-bottom: 1rem; }

  .post-template .post-header {
	padding: 40px 0; }

  .pagination {
	margin-top: 30px;
	margin-bottom: 30px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-ms-border-radius: 2px;
	-o-border-radius: 2px;
	border-radius: 2px; }

  body .menu .pagination {
	margin-top: -60px; }

  .primary-navigation {
	padding-top: 20px; }

  h1, h2 {
	font-size: 2.4rem;
	line-height: 1.1em;
	letter-spacing: 0; }

  h3 {
	font-size: 2.0rem;
	line-height: 2.2rem; }

  h4 {
	font-size: 1.8rem;
	line-height: 2.0rem; }

  h5, h6 {
	font-size: 1.5rem;
	line-height: 1.7rem; }

  .post-start-tags {
	float: none;
	display: block;
	margin-top: 4px;
	display: none; }

  .article_container:first-child .post-inner {
	padding-top: 0; }

  .menu {
	width: 100%;
	z-index: 99999999; }

  .menu:before {
	display: none; }

  #blog-logo {
	margin: 10px 0; }

  body.page-template-page-about-php h2.post-title {
	display: none; }

  body.page .content {
	margin-bottom: 9%; }

  body.page-template-page-about-php .content {
	min-height: 0; }

  body.page .post-header {
	padding-bottom: 0;
	padding-top: 2rem; }

  body.page-template-page-about-php .post-header {
	padding-top: 0; }

  body.page-template-page-about-php .post-content {
	margin-top: 20px; }

  body.page article {
	padding-right: 8%;
	padding-left: 8%; } }
/* ==========================================================================
   10. Media Queries - Smaller than 500px
   ========================================================================== */
@media only screen and (max-width: 500px) {
  /* RESPONSIVE INDICATOR */
  .jqres {
	width: 500px; }

  #blog-logo img {
	max-height: 80px; }

  .post {
	width: auto;
	font-size: 0.8em;
	line-height: 1.6em; }

  .blog-title {
	font-size: 3rem; }

  .blog-description {
	font-size: 1.5rem; }

  .dropcap {
	font-size: 4.2rem;
	line-height: 4rem;
	margin: 0 4px 0 0; }

  .post-footer {
	margin-top: 0rem; }

  h1, h2 {
	font-size: 2.4rem;
	line-height: 1.1em;
	letter-spacing: 0; }

  h3 {
	font-size: 2.0rem;
	line-height: 2.2rem; }

  h4 {
	font-size: 1.8rem;
	line-height: 2.0rem; }

  h5, h6 {
	font-size: 1.5rem;
	line-height: 1.7rem; }

  .post-template .post {
	padding-bottom: 0; }

  .post-template .post-header {
	padding: 30px 0; }

  .post:first-of-type {
	padding-top: 40px; }

  .post-title {
	font-size: 2.5rem;
	line-height: 2.9rem;
	letter-spacing: -1px;
	padding: 0;
	text-align: left; }

  .post-meta {
	font-size: 1.3rem; }

  .post-footer {
	padding: 4rem 0;
	text-align: center; }

  .post-footer .author {
	margin: 0 0 2rem 0;
	padding: 0 0 1.6rem 0;
	border-bottom: #EBF2F6 1px dashed; }

  .post-footer .share {
	position: static;
	width: auto; }

  .post-footer .share a {
	margin: 1.4rem 0.8rem 0 0.8rem; }

  .site-footer {
	margin-top: 6rem;
	font-size: 1.1rem; } }
/* ==========================================================================
   End of file. Media queries should be the last thing here. Do not add stuff
   below this point
   ========================================================================== */