/* Coolors Exported Palette - coolors.co/33658a-86bbd8-2f4858-f6ae2d-f26419 

// HSL 
$color1: hsla(206%, 46%, 37%, 1);
$color2: hsla(201%, 51%, 69%, 1);
$color3: hsla(203%, 30%, 26%, 1);
$color4: hsla(39%, 92%, 57%, 1);
$color5: hsla(21%, 89%, 52%, 1);

// RGB 
$color1: rgba(51, 101, 138, 1);  #33658a  - blue
$color2: rgba(134, 187, 216, 1); #86bbd8  - light blue
$color3: rgba(47, 72, 88, 1);  #2f4858  - dark grey-blue
$color4: rgba(246, 174, 45, 1); #f6ae2d  - yellow
$color5: rgba(242, 100, 25, 1);  #f26419  - orange
*/

body {
  font-size: 18px;
}

.style-elements {
  line-height: 1.5 !important;
}

.style-elements .title, .style-elements .heading, .style-elements .small-heading,
.style-elements .small-heading a span.el {
  white-space: normal !important;
}

.style-elements .markdown {
  font-size: 1em;
  line-height: 1.5;
  width: 100%;
}

.style-elements .markdown h1, .style-elements .markdown h2, .style-elements .markdown h3, .style-elements .markdown h4, .style-elements .markdown h5, .style-elements .markdown h6 {
  text-rendering: optimizeLegibility;
  line-height: 1;
  margin-top: 0;
  color: #2f4858;
  font-family: Quicksand, Helvetica, sans-serif;
  font-weight: normal;
}

.style-elements .markdown blockquote + figcaption cite {
  display: block;
  font-size: inherit;
  text-align: right;
}

.style-elements .markdown blockquote {
    border-left: 4px solid #f6ae2d; /* #2f4858;*/
    border-right: 4px solid #f6ae2d;
    background-color: #fff2ce;
    font-size: 0.8em;
    padding: 20px;
    padding-bottom: 10px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.style-elements .markdown h1 {
  font-size: 3.0em;
  margin-bottom: 2.0202rem;
}

.style-elements .markdown h2 {
  font-size: 2.66667em;
  margin-bottom: 1.61616rem;
}

.style-elements .markdown h3 {
  font-size: 2em;
  margin-bottom: 1.21212rem;
}

.style-elements .markdown h4 {
  font-size: 1.33333em;
  margin-bottom: 0.80808rem;
}

.style-elements .markdown h5, .style-elements .markdown h6 {
  font-size: 1em;
  margin-bottom: 0.60606rem;
}

.style-elements .markdown p {
  margin: auto auto 1.5rem;
}

.style-elements .markdown small {
  font-size: 65%;
}

.style-elements .markdown input,
.style-elements .markdown abbr,
.style-elements .markdown acronym,
.style-elements .markdown blockquote,
.style-elements .markdown code,
.style-elements .markdown kbd,
.style-elements .markdown q,
.style-elements .markdown samp,
.style-elements .markdown var {
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

.style-elements .markdown input, .style-elements .markdown textarea {
    display: block;
    margin: 1rem;
    margin-left: 0;
    padding: 4px;
    font-weight: bold;
    border-radius: 3px;
    border: 1px solid #33658a;
}

.style-elements .markdown pre {
  white-space: pre;
  margin-bottom: 1em;
}

.style-elements .markdown pre code {
  white-space: -moz-pre-wrap;
  white-space: pre-wrap;
  border-radius: 3px;
  word-wrap: normal;
  font-family: "Inconsolata", monospace;
  font-size: 0.9em;
}

.style-elements .markdown code {
    font-family: "Inconsolata", monospace;
    font-size: 1em;
}

.style-elements .markdown abbr {
  -webkit-font-variant: small-caps;
  -moz-font-variant: small-caps;
  -ms-font-variant: small-caps;
  font-variant: small-caps;
  font-weight: 600;
  text-transform: lowercase;
  color: gray;
}

.style-elements .markdown abbr[title]:hover {
  cursor: help;
}

.style-elements .markdown .typl8-drop-cap:first-letter {
  float: left;
  margin: 10px 10px 0 0;
  padding: 0 20px;
  font-size: 4em;
  font-family: inherit;
  line-height: 1;
  text-indent: 0;
  background: transparent;
  color: inherit;
}

.style-elements .markdown p + .typl8-drop-cap {
  text-indent: 0;
  margin-top: 0;
}

/**
 * Lining Definition Style Markup
 *
  <dl class="typl8-lining">
    <dt><b></b></dt>
    <dd></dd>
  </dl>
 *
 * Extend this object into your markup.
 *
 */
 .style-elements .markdown .typl8-lining dt,
 .style-elements .markdown .typl8-lining dd {
  display: inline;
  margin: 0;
}

.style-elements .markdown .typl8-lining dt + dt:before,
.style-elements .markdown .typl8-lining dd + dt:before {
  content: "\A";
  white-space: pre;
}

.style-elements .markdown .typl8-lining dd + dd:before {
  content: ", ";
}

.style-elements .markdown .typl8-lining dd:before {
  content: ": ";
  margin-left: -0.2rem;
}

/**
 * Dictionary Definition Style Markup
 *
  <dl class="typl8-dictionary-style">
    <dt><b></b></dt>
    <dd></dd>
  </dl>
 *
 * Extend this object into your markup.
 *
 */
 .style-elements .markdown .typl8-dictionary-style dt {
  display: inline;
  counter-reset: definitions;
}

.style-elements .markdown .typl8-dictionary-style dt + dt:before {
  content: ", ";
  margin-left: -0.2rem;
}

.style-elements .markdown .typl8-dictionary-style dd {
  display: block;
  counter-increment: definitions;
}

.style-elements .markdown .typl8-dictionary-style dd:before {
  content: counter(definitions, decimal) ". ";
}

/**
 * Blockquote Markup
 *
    <figure>
      <blockquote cite="">
        <p></p>
      </blockquote>
      <figcaption>
        <cite>
          <small><a href=""></a></small>
        </cite>
      </figcaption>
    </figure>
 *
 * Extend this object into your markup.
 *
 */
/**
 * Pull Quotes Markup
 *
  <aside class="typl8-pull-quote">
    <blockquote>
      <p></p>
    </blockquote>
  </aside>
 *
 * Extend this object into your custom stylesheet.
 *
 */
 .style-elements .markdown .typl8-pull-quote {
  position: relative;
  padding: 1em;
}

.style-elements .markdown .typl8-pull-quote:before, .typl8-pull-quote:after {
  height: 1em;
  opacity: 0.5;
  position: absolute;
  font-size: 4em;
  color: #dc976e;
}

.style-elements .markdown .typl8-pull-quote:before {
  content: '“';
  top: 0;
  left: 0;
}

.style-elements .markdown .typl8-pull-quote:after {
  content: '”';
  bottom: 0;
  right: 0;
}

/**
 * Figures Markup
 *
  <figure>
    <figcaption>
      <strong>Fig. X.X | </strong><cite title=""></cite>
    </figcaption>
  </figure>
 *
 * Extend this object into your markup.
 *
 */
/**
 * Footnote Markup : Replace 'X' with your unique number for each footnote
 *
  <article>
    <p><sup><a href="#fn-itemX" id="fn-returnX"></a></sup></p>
    <footer>
      <ol class="foot-notes">
        <li id="fn-itemX"><a href="#fn-returnX">↩</a></li>
      </ol>
    </footer>
  </article>
 *
 * Extend this object into your markup.
 *
 */

 .style-elements .markdown ul, .style-elements .markdown ol {
    padding-bottom: 1rem;
    padding-left: 1.5rem;
    list-style-position: outside;
}

.style-elements .markdown li {
    padding-left: 0.5rem;
}

.style-elements .markdown hr {
    border-bottom: 1px solid #e0e0e0;
}


@media only screen and (max-width: 800px) {
  .style-elements .main {
    width: 100% !important;
  }

  .style-elements .header-panel {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .style-elements .post-date, .style-elements .tag, .style-elements .nav-option,
  .style-elements .markdown input, .style-elements .markdown textarea {
    font-size: 1em !important;
  }

  .style-elements .small-heading {
    font-size: 1.5em !important;
  }
  .style-elements .heading {
    font-size: 2em !important;
  }
  .style-elements .title {
    font-size: 2.5em !important;
  }

  .style-elements .nav-container {
    background-color: #fdfdfd;
    border: 1px solid #2f4858;
    border-radius: 5px;
    text-align: right;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  
  }
    
  .style-elements .nav-container .el.menu-icon {
    display: block !important;
    float: right;
    width: 36px;
    height: 26px;
    line-height: 0;
    padding-top: 10px;
    text-align: center;
  }
  .style-elements .nav-container .menu-icon > svg {
    width: 18px;
    height: 15px;
  }
  .style-elements .nav-container .menu-icon > svg path {
    fill: #33658a;
  }

  .style-elements .nav-container .nav-inner-container {
    clear: both !important;
    display: none !important;
    visibility: hidden !important;
    transition: visibility 0.5s;
  }

  .style-elements .nav-container .nav-inner-container > .el {
    display: block !important;
  }

  .style-elements .nav-container:focus {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    margin-left: 50% !important;
    padding: 5px !important;    
    z-index: 10 !important; 
  }
  .style-elements .nav-container:focus .nav-inner-container {
    display: block !important;
    width: 100% !important;
    margin-top: 30px !important;
    z-index: 20 !important;
    visibility: visible;
  }
  .style-elements .nav-container:focus .nav-inner-container .nav-option {
    z-index: 30 !important;
  }
  .style-elements .nav-container:focus .menu-icon {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
  }
}

.style-elements .header { 
  font-family: "Quicksand", "Helvetica", sans-serif;
  font-size: 16px;
}

.header {
  /* background-color: #fff; */
  /* box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1); */
  z-index: 3;
  width: 100%;
}

.header a:visited {
  color: #33658a;
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  /* background-color: #fff; */
}

.header li {
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: right;
}

.header li a {
  padding: 10px 15px;
  /* border-right: 1px solid #f4f4f4; */
  text-decoration: none;  
}

.header li a:hover,
.header .menu-btn:hover {
  background-color: #f6ae2d;
}

/* menu */

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* menu icon */

.header .menu-icon {
  cursor: pointer;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: #33658a;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #33658a;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}

/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  /* max-height: 240px; */
  max-height: 500px;
  width: 100%;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

@media (min-width: 800px) {
  .header {
    font-size: inherit;
  }
  .header ul {
    text-align: right;  
  }
  .header li {
    display: inline-block;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
}