/********************************************************************************************

Downpour v0.1 by Jackson de Campos
Copyright Jackson de Campos

*********************************************************************************************/

/* Normalization
*********************************************************************************************/

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,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,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}

/* Setup
*********************************************************************************************/

@charset "UTF-8";
@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 300;
  src: url(/fonts/LibreFranklin-Light.otf) format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Libre Franklin";
  font-style: italic;
  font-weight: 300;
  src: url(/fonts/LibreFranklin-LightItalic.otf) format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Libre Franklin";
  font-style: bold;
  font-weight: 400;
  src: url(/fonts/LibreFranklin-Regular.otf) format("opentype");
  font-display: swap;
}

body { /* same as notes */
  background: #fff;
  font: 300 16px/27px "Libre Franklin", sans-serif;
  color: #333;
  text-rendering: optimizeLegibility;
}

a {
  text-decoration: none;
  color: #0d72c7; /* formerly: #0086b3, #4078C0 */
  -webkit-transition: color .1s ease-in-out;
}

a:hover {
  color: #ed6a43; /* #AB4642 */
}

/*.dp-panel .dp-row {
  background: white;
}*/

/* ==== ADDITIONS ==============================================================
*******************************************************************************/

h3, h4 { font-size: 20px !important; }

/* ==== GISTS ==================================================================
*******************************************************************************/

.gist-file, .gist-data {
  max-width: 680px !important;
  border-color: transparent !important;
}

.blob-num { border-color: transparent !important; }

.blob-code { font-size: 14px !important; }

.gist-meta { display: none; }

/* ==== HORIZONTAL RULES =======================================================
*******************************************************************************/

hr {
  display: invisible;
  border: 0;
}

hr:after {
  display: block;
  width: 85%;
  margin: 0 0 20px; 
  text-align: center;
  content: "* * *";
}

/* ==== INSERTS ================================================================
*******************************************************************************/

ins {
  text-decoration: none;
  background: #ffc;
}

/* ==== HEADER POST ============================================================
*******************************************************************************/

.top {
/*  background: #222;*/
  font-size: 110%;
}

.top p { margin: 0; }

/* ==== POST TITLE =============================================================
*******************************************************************************/

article.single h2 a { color: #000; }

/* ==== IMAGE STYLING ==========================================================
*******************************************************************************/

img {
  display: block;
  margin: 0 auto;
}

img[alt='bordered'] {
  border: 1px solid #ccc;
  border-width: 1px 0;
}

/* Typography
*********************************************************************************************/

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  color: #303030;
  margin-bottom: 5px;
  max-width: 90%;
}

h1, h2, h3, h4 { 
  font-size: 24px;
  line-height: 39px;
}

h3, h4 { 
  margin-top: 20px;
}

p, ul, ol {
  margin: 0 0 20px;
}

ul, ol {
  margin-left: 40px;
}

ul li {
  list-style: disc;
}

ol li {
  list-style: decimal;
}

em { 
  font-style: italic; 
}

strong { 
  font-weight: normal;
  color: #000; 
}

/*a {
  color: #303030;
  text-decoration: none;
  -moz-transition-duration: 0.1s;
  -webkit-transition-duration: 0.1s;
}

a:hover, a:focus {
  color: #000000;
  background: #ffc;
}*/

li code, p code, pre {
  font-family: 'Inconsolata', monospace; /*was Source Code Pro*/
  text-rendering: optimizeLegibility;
  font-size: 110%; /*18px;*/
  letter-spacing: 0.1em;
  margin: 1em 0.1em; /*first value was zero*/
}

/* Posts
*********************************************************************************************/

article {
  width: 100%;
  border-bottom: 1px solid #f1f1f1;
  padding: 60px 0;
}

article.draft {
  display: none;
}

article:last-child,
article.single {
  border-bottom: 0;
}

.post blockquote {
  border-left:.5em solid #eee;
  padding: 0 2em;
  margin-left:0;
  max-width: 476px;
}

.post blockquote  cite {
  font-size: 14px;
  line-height: 20px;
  color: #bfbfbf;
}

.post blockquote cite:before {
  content: '\2014 \00A0';
}

.post blockquote p {  
  color: #666;
  max-width: 460px;
}

/*.post p a,*/
/*.post ul a,*/
/*.post ol a {*/
  /*border-bottom: 1px solid #ccc;*/ /* #ebebeb */
/*}*/

.post p, 
.post ul, 
.post ol {
  max-width: 85%;
}

.post img {
  max-width: 100%;
}

/* Buttons
*********************************************************************************************/

.button {
  background-color: #fbfbfb;
  border: 1px solid #ebebeb;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 14px;
  line-height: 24px;
  font-weight: 300;
  border-radius: 40px;
  color: #9b9b9b;
  float: left;
  margin: 0 0 10px 0;
  padding: 8px 20px 9px;  
}

.button.small {
  padding: 0px 12px 1px;
  float: right;
  margin: 5px 0 3px 0;
}

.button:hover {
  color: #9b9b9b;
  text-shadow: none;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
}

ul.actions {
  width: 100%;
  float: left;
  margin: 0;
}

ul.actions li {
  width: 100%;
  float: left;
  margin-top: 3px;
  list-style: none;
}

/* Meta
*********************************************************************************************/

.meta {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 14px;
  line-height: 19px;
  font-weight: 300;
  color: #b3b3b1;
  text-align: right;
}

.meta ul {
  border-right: 1px solid #ebebeb;
  width: 100%;
  float: right;
  margin-right: 14px;
  padding: 20px 0 26px;
  position: relative;
}

.meta ul li {
  list-style: none;
}

.meta ul li span {
  color: #ebebeb;
}

.meta ul li:after { 
  color: #ebebeb;
  content: " -";
}

.meta ul li:last-child { 
  border-radius: 50%;
  background-color: #fbfbfb;
  border: 1px solid #ebebeb;
  position: absolute;
  width: 10px;
  height: 10px;
  right: -6px;
  bottom: -6px;
}

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

.meta ul li:first-child { 
  font-weight: 400;
}

.meta a {
  color: #b3b3b1;
}

.meta a:hover {
  color: #303030;
}

.thumbnail {
  background-color: #fbfbfb;
  border: 1px solid #ebebeb;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  padding: 5px;
  float: right;
  margin-right: -21px;
  -moz-transition-duration: 0.05s;
  -webkit-transition-duration: 0.05s;
}

.not-found .thumbnail {
  background-color: #404040;
  border-color: #404040;
}

.thumbnail img {
  border-radius: 50%;
  width: 100%;
  height: 100%;
}

/* Powered by Dropplets
*********************************************************************************************/

.powered-by {
  border-radius: 3px;
  background-color: #000000;
  color: #ffffff;
  font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  font-size: 12px;
  position: fixed;
  display: block;
  padding: 2px 10px;
  bottom: 10px;
  right: 10px;
  cursor: pointer;
  opacity: 0.3;
}

.powered-by:hover {
  color: #ffffff;
  opacity: 0.8;
}

.powered-by img {
  height: 15px;
  float: left;
  margin: 5px 5px 0 -2px;
}

/* XL
*********************************************************************************************/

@media (max-width: 980px) {

  /* Buttons
  *****************************************************************************************/
  
  .button {
      font-size: 12px;
      line-height: 17px;
      padding: 8px 20px 9px;
      
  }
  
  /* Meta
  *****************************************************************************************/
  
  .meta {
      font-size: 12px;
      line-height: 17px;
  }
  
}

/* L
*********************************************************************************************/

@media (max-width: 820px) {
  
  /* Setup
  *****************************************************************************************/
  
  body {
    font-size: 14px;
    line-height: 23px;
  }
  
  /* Typography
  *****************************************************************************************/
  
  h1, h2 { 
      font-size: 18px;
      line-height: 29px;
  }
  
  h3, h4 { 
      font-size: 14px;
      line-height: 23px;
  }
  
  p {
      max-width: 100%;
  }
  
}

/* M
*********************************************************************************************/

@media (max-width: 640px) {

  /* Meta
  *****************************************************************************************/
  
  .meta {
      display: none;
  }
  
  /* Posts
  *****************************************************************************************/
  
  .post p, 
  .post ul, 
  .post ol {
      max-width: 100%;
  }
  
}

/* XS
*********************************************************************************************/

@media (max-width: 400px) {
  
  /* Articles
  *****************************************************************************************/
  
  article {
      padding: 40px 0;
  }
  
  
}

/*CUSTOM*/

#background {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  z-index:-1;

  -webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -o-background-size: cover !important;
  background-size: cover !important;
  /*filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/puddle.jpg', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='puddle.jpg', sizingMethod='scale')";*/
}

#hero {
  position:absolute;
  top:0;
  bottom:0;
  width:100%;
  height:100%;

  display:table;
  vertical-align:middle;
}

#hero-content {
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}

#hero-content > * {
  margin:1rem auto;
  max-width:790px;
  color:white;
}

/*h1 {
  font-size:5rem;
  line-height:100%;
}*/

#main {
/*  background-color: #fff;*/
  position:absolute;
  top:0;
  left:0;
  right:0;
}

#info {
  display:inline-block;
  width:auto;
}

#info > * {
  display:inline-block;
  padding: 0 1rem;
  display:table-cell;
  width:300px;
}

#info > * > * {
  vertical-align:middle;
}

#info > span:nth-child(3) {
  text-align:left;
}

#info > span:nth-child(1) {
  text-align:right;
}

#header .row {
  margin:1rem auto;
}

#header {
  padding:0;
  text-align:center;
}

#header .thumbnail {
  float:none;
  width:60px;
  height:60px;
  padding:0;
}

/*a:hover {
  border-bottom: 2px solid #222;
}*/

ul.horizontal {
  margin: 0;
  color: #b3b3b1;
}

ul.horizontal li {
  list-style-type:none;
  display:inline-block;
  text-align:left;
  padding-right:1rem;
}

.row .three-quarters {
  float:none !important;
  margin:0 auto !important;
}