@charset "UTF-8";
/*
  # Kirby Starterkit
  
  This CSS file handles all of the styling in of Kirby’s
  Starterkit. Feel free to tinker around with it and
  adjust it according to your needs.  
  
  ## Color Definitions
  
  The following colors used in the Starterkit. If you want
  to use this CSS file as a starting point for your own
  project, you can do a simple search & replace to adjust
  the color scheme to your needs.
  
  - Background:            #fffff8
  - Text:                  #261e66
  - Hovered Links:         #560bed
  - Active Button BG:      #4509be
  - Caption BG in projects
    showcase:              rgba(38, 30, 102, .95)

  - Highlight, Selection,
    Link Underline:        #71efac
  - Tap color
    (touch devices):       rgba(113, 239, 172, .5)
  - Marked Text BG,
    Callout Boxes BG:      #eafded

  - Menu Separator,
    <hr> in text:          #a8a5be
  - Blockquote BG:         #fffffd
  
  ## Table of Contents
  
  1 Global Rules & Definitions
  1.1 Font Definitions
  1.2 Reset & Normalization
  1.3 General Typography
  1.4 Images & Figures
  
  2 Layout Helpers & Reusable Components
  2.1 Kirbytext
  2.2 Button
  2.3 Grid & Layout
  2.4 Pagination
  2.5 Projects Showcase
  
  3 Site Layout
  3.1 Header
  3.2 Menu
  3.3 Sticky Footer
  3.4 Main Content
  
  4 Template-specific Components
  4.1 Homepage
  4.2 Blog Article
  4.3 Team
  4.4 Contact
  
*/

/* =====  1 Global Rules & Definitions  ===================================== */

/* -----  1.1 Font Definitions  --------------------------------------------- */

/* Montserrat 
@font-face {
  font-family: 'Montserrat';
  src: url(../fonts/montserrat-700.woff) format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url(../fonts/montserrat-400.woff) format("woff");
  font-weight: 400;
  font-style: normal;
}
*/
/* Vesper Libre 
@font-face {
  font-family: 'Vesper Libre';
  src: url(../fonts/vesperlibre-400.woff) format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Vesper Libre';
  src: url(../fonts/vesperlibre-500.woff) format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Vesper Libre';
  src: url(../fonts/vesperlibre-700.woff) format("woff");
  font-weight: 700;
  font-style: normal;
}*/

/* -----  1.2 Reset & Normalization  ---------------------------------------- */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
  list-style: none;
}

article, aside, details, figcaption, figure,
footer, header, main, menu, nav, section, summary {
  /* Add correct display for IE 9- and some newer browsers */
  display: block;
}

/*::-moz-selection {
  background: #71efac;
  color: #261e66;
}

::selection {
  background: #71efac;
  color: #261e66;
}*/

/* -----  1.3 General Typography  ------------------------------------------- */

h1, h2, h3, h4, h5, h6,
p, ul, ol, figure, pre {
  /* Reset font-sizes and normalize margins */
  font-size: inherit;
  line-height: inherit;
  margin: 0 0 1.5rem;
}

/* Headings */
h1, h2, h3 {
  font-family: Montserrat, Helvetica, Arial, sans-serif;
  font-weight: 700;
}

h1 {
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1.25;
  text-align: center;
  margin-bottom: 3rem;
}

h2 {
  font-size: 1.75rem;
  line-height: 2.2rem;
  text-align: center;
}

h3 {
  font-size: 1.25em;
  line-height: 1.2;
}

h4 {
  font-size: 1em;
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
  /*border-bottom: 2px solid #71efac;*/
}

a:hover, a:focus, a:active {
  
}

/* Misc */
hr {
  font-size: 1.25rem;
  font-weight: 500;
  height: 1.5rem;
  text-align: center;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  color: #71efac;
}

hr::before {
  content: "";
  position: relative;
  display: block;
  background: currentColor;
  height: 2px;
  top: calc(50% + 1px);
}

hr::after {
  content: "× × ×";
  background: #fffff8;
  position: relative;
  padding: 0 .25rem;
  top: -.25rem;
}

h1 + hr,
.intro + hr {
  /* Shift a <hr> right after an `.intro`
     or <h1> block one line up. */
  margin-top: -1.5rem;
}

i, em {
  font-weight: 400i;
}

b, strong {
  font-weight: 600;
  color:#333;
}


/* -----  1.4 Images & Figures  --------------------------------------------- */

img {
  border-style: none;
  width: 100%;
  height: auto;
}

figcaption {
  font-size: .75rem;
  line-height: 1.5rem;
}
.fluid {
  width: 100%;
  height: auto;
}


/* =====  2 Layout Helpers & Reusable Components  =========================== */

/* The Clearfix™: A classic … */
.cf::after {
  content: "";
  display: block;
  height: 0;
  overflow: hidden;
  clear: both;
}

/* -----  2.1 Kirbytext  ---------------------------------------------------- */

.intro {

}

h1 + .intro {
  margin-top: -2.25rem;
}

.text h2, .text h3 {
  margin-top: 3rem;
}

.text ul, .text ol {
  margin-left: 1.5em;
}

.text hr {
  /* We use a more muted style for horizontal rules within
     the main content. */
  color: #a8a5be;
}

.text ul {
  list-style: none;
}

.text ul > li::before {
  content: "–";
  display: inline-block;
  position: relative;
  width: 1.25em;
  margin-right: -1.25em;
  left: -1.25em;
  padding-left: .25em;
}

.text ol > li {
  list-style: decimal;
}

.text pre, .text code {
  background-color: #eafded;
  font-family: Courier, monospace;
  font-size: .75rem;
}

.text code {
  margin: -.25em 0;
  padding: .25em .15em;
  position: relative;
  bottom: .05em;
}

.text pre > code {
  display: block;
  margin: 0;
  padding: .8em;
  position: static;
  bottom: auto;
  overflow-x: auto;
}

@supports (-webkit-overflow-scrolling: touch) {
  .text pre > code {
    /* Enables smoother scrolling for code sections on
       mobile (i.e. touch) devices. */
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }
}




@media all and (min-width: 75em) {
  .pagination-item {
    position: fixed;
    top: 50%;
    margin-top: -.875rem;
  }
}

@media all and (pointer: coarse) {
  .pagination-item {
    /* On touch-devices we increase prev/next buttons */
    width: 2.25rem;
    height: 2.25rem;
  }
}


@media (any-hover: none) {
  .showcase-caption {
    /* The media query, enclosing these rules matches only
       touch-screen devices that do not support hover due
       to the lack of a pointing device like a mouse.
       It does not work in all mobile browsers, but
       progressively enhances the experience on supported
       devices. Tested in Safari (iOS) 9.3 */
    opacity: 1.0;
    /* Reset will-change property to keep it from eating
       up unneccessary resources on touch-only devices */
    will-change: auto;
  }
  .showcase-title {
    font-size: .85em;
  }
}

/* =====  3 Site Layout  ==================================================== */

html {
  background: #ccc;
  color: #faf9ee;
  font: normal 300 1em/1.35em 'Source Sans Pro', Helvetica, Arial, sans-serif;
  letter-spacing:0.2px;
  overflow-y: hidden;
  cursor: default;
  position: relative;
  min-height: 100%;

  /* Prevent adjustments of font size after orientation
     changes in IE and iOS. */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  /* Highlight color for WebKit-bases touch devices. */
  -webkit-tap-highlight-color: rgba(113, 239, 172, .5);
}

@media all and (max-width: 30em) {
  html {
    /* We decrease the font-size a little-bit for tiny
       screens. Because this stylesheet uses relative units
       everywhere, everything scales nicely. */
    /*font-size: 1.25em;*/
  }
}