/** Reset some basic elements */
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; }

html, body { min-width: 320px; min-height: 100%; box-sizing: border-box; overflow-x: hidden; }

* { box-sizing: inherit; }

*:focus { outline: none; }

/** Basic styling */
body { font: 400 16px/1.5 Montserrat, sans-serif; color: #123251; background-color: #ffffff; -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal; }

::selection { background: #c7dcf7; /* WebKit/Blink Browsers */ }

::-moz-selection { background: #c7dcf7; /* Gecko Browsers */ }

/** Set `margin-bottom` to maintain vertical rhythm */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, .highlight { margin-bottom: 15px; }

/** Images */
img { max-width: 100%; vertical-align: middle; }

/** Figures */
figure > img { display: block; }

figcaption { font-size: 14px; }

/** Lists */
ul, ol { margin-left: 30px; }

li > ul, li > ol { margin-bottom: 0; }

/** Headings */
h1, h2, h3, h4, h5, h6 { font-family: Montserrat, Arial, sans-serif; font-weight: 300; }

@media screen and (max-width: 600px) { h1, h2, h3, h4, h5, h6 { margin-top: 30px; } }

/** Links */
a { color: #2a7ae2; text-decoration: none; }

a:visited { color: #2a7ae2; }

a:hover { color: #123251; text-decoration: underline; }

.social-media-list a:hover { text-decoration: none; }

.social-media-list a:hover .username { text-decoration: underline; }

a.no-effect { color: inherit; text-decoration: none; }

/** Buttons */
button { cursor: pointer; }

button.fancy { font-family: Montserrat, Arial, sans-serif; min-width: 12em; padding: 1em 30px; border: 1px solid #828282; border-radius: 3px; background: #fafafa; transition: background 100ms; }

button.fancy:hover { background: #ffffff !important; }

button.fancy:active { color: #828282; }

button.fancy:focus { outline: none; border: 1px solid #5090EE; }

/** Blockquotes */
blockquote { color: #828282; border-left: 4px solid #e8e8e8; padding-left: 15px; font-size: 18px; letter-spacing: -1px; font-style: italic; }

blockquote > :last-child { margin-bottom: 0; }

/** Code formatting */
pre, code { font-size: 15px; border: 1px solid #e8e8e8; border-radius: 3px; background-color: #eef; }

code { padding: 1px 5px; }

pre { padding: 8px 12px; overflow-x: auto; }

pre > code { border: 0; padding-right: 0; padding-left: 0; }

:target::before { content: ""; display: block; height: 60px; /* fixed header height*/ margin: -60px 0 0; /* negative fixed header height */ }

/** Wrapper */
.wrapper { display: flex; flex-direction: column; max-width: -webkit-calc(1000px - (30px * 2)); max-width: calc(1000px - (30px * 2)); margin-right: auto; margin-left: auto; padding-right: 30px; padding-left: 30px; }

@media screen and (max-width: 800px) { .wrapper { max-width: -webkit-calc(1000px - (30px)); max-width: calc(1000px - (30px)); padding-right: 15px; padding-left: 15px; } }

@media screen and (max-width: 600px) { .palm-invisible { display: none !important; } }

/** Clearfix */
/** Icons */
.icon > svg { display: inline-block; vertical-align: middle; }

.icon > svg path { fill: #828282; }

.social-media-list .icon { padding-right: 5px; }

.social-media-list li + li { padding-top: 5px; }

/** Font effects */
.title-lowcaps, .text-lowcaps { text-transform: lowercase; font-variant: all-small-caps; }

.title-lowcaps { letter-spacing: 8px; }

.text-lowcaps { font-size: 19.2px; letter-spacing: 1px; }

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

.text-subtle { opacity: 0.5; }

.text-spaced { margin: 30px 0; }

ul, ol { margin-top: 30px; margin-bottom: 30px; }

li { margin-top: 0.5rem; }

.header { display: block; width: 100%; min-width: 320px; background: #fcfcfc; position: fixed; top: 0; left: 0; border-bottom: 1px solid #cccccc; box-shadow: 3px 0 20px 0 #DADADA; z-index: 2; }

.header div { display: flex; align-items: center; max-width: 1000px; margin: 0 auto; opacity: 0.3; }

.header div a { line-height: 0; }

.header div svg { width: 40px; margin: 5px 15px; }

.buttons-row button { margin: 15px; }

.main-listing h1, .main-listing hr { margin: 30px 0; }

.main-listing p, .main-listing ul { line-height: 30px; }

.index-listing { display: flex; flex-direction: column; background: #fcfcfc; align-items: flex-start; padding: 30px 2em; margin: 30px 0; border: 1px solid #828282; box-shadow: 2px 11px 30px 0px #E4E4E4; transition: box-shadow 200ms; }

.index-listing:hover { box-shadow: 2px 8px 20px 0px #DDDDDD; }

.index-listing:active { box-shadow: 2px 3px 7px 0px #D0D0D0; }

.index-listing h2, .index-listing small { margin: 0.2em 0; line-height: 1; }

.index-listing h2 { margin-right: 20px; margin-bottom: 0.3em; }

.index-listing small { opacity: 0.5; }

.subtle-footer { color: #b5b5b5; font-size: 55%; text-align: center; padding: 15em 0 10em 0; }

.content-section { margin: 90px 0; }

.content-block { display: flex; justify-content: space-around; align-items: center; border: 1px solid #828282; border-radius: 3px; min-height: 18em; padding: 2em; margin: 60px 0; box-shadow: 2px 11px 30px 0px #E4E4E4; transition: box-shadow 200ms, border 100ms; }

.content-block:hover { border: 1px solid #2a7ae2; box-shadow: 2px 8px 20px 0px #DDDDDD; }

.content-block:hover .arrow-glyph { color: #2a7ae2; }

.content-block:active { box-shadow: 2px 3px 7px 0px #D0D0D0; }

.content-block .text { flex: 6; }

.content-block .image { flex: 5; padding: 0 0 0 2em; text-align: center; }

.content-block .image img { margin: 2px 0; }

.content-block .arrow-glyph { font-size: 300%; opacity: 0.8; margin-left: 20px; transition: color 100ms; }

.multi-col { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; }

.multi-col .col-5 { min-width: 140px; max-width: 140px; }

.multi-col .col { flex: 1; display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; text-align: left; margin: 0 20px; }

.multi-col .col b { margin: 10px 0; }

.multi-col .col p { line-height: 1.3; text-align: center; font-size: 80%; }

.multi-col .col:first-child { margin-left: 0; }

.multi-col .col:last-child { margin-right: 0; }

.multi-col .col img { width: 100%; }

.two-col { display: flex; flex-direction: row; }

.two-col div { flex: 1; display: flex; flex-wrap: wrap; align-content: center; }

.two-col div:first-child { margin-right: 17.5px; }

.two-col div:last-child { margin-left: 17.5px; }

@media screen and (max-width: 600px) { .two-col { flex-direction: column; } }

@media screen and (max-width: 600px) { .content-block { flex-direction: column; position: relative; margin: 30px 0; } .content-block .image img { max-width: 18em; margin: 0; padding: 0 10px; } .content-block .arrow-glyph { position: absolute; opacity: 0.3; right: 10%; } }

/** Syntax highlighting styles */
.highlight { background: #fff; }

.highlighter-rouge .highlight { background: #eef; }

.highlight .c { color: #998; font-style: italic; }

.highlight .err { color: #a61717; background-color: #e3d2d2; }

.highlight .k { font-weight: bold; }

.highlight .o { font-weight: bold; }

.highlight .cm { color: #998; font-style: italic; }

.highlight .cp { color: #999; font-weight: bold; }

.highlight .c1 { color: #998; font-style: italic; }

.highlight .cs { color: #999; font-weight: bold; font-style: italic; }

.highlight .gd { color: #000; background-color: #fdd; }

.highlight .gd .x { color: #000; background-color: #faa; }

.highlight .ge { font-style: italic; }

.highlight .gr { color: #a00; }

.highlight .gh { color: #999; }

.highlight .gi { color: #000; background-color: #dfd; }

.highlight .gi .x { color: #000; background-color: #afa; }

.highlight .go { color: #888; }

.highlight .gp { color: #555; }

.highlight .gs { font-weight: bold; }

.highlight .gu { color: #aaa; }

.highlight .gt { color: #a00; }

.highlight .kc { font-weight: bold; }

.highlight .kd { font-weight: bold; }

.highlight .kp { font-weight: bold; }

.highlight .kr { font-weight: bold; }

.highlight .kt { color: #458; font-weight: bold; }

.highlight .m { color: #099; }

.highlight .s { color: #d14; }

.highlight .na { color: #008080; }

.highlight .nb { color: #0086B3; }

.highlight .nc { color: #458; font-weight: bold; }

.highlight .no { color: #008080; }

.highlight .ni { color: #800080; }

.highlight .ne { color: #900; font-weight: bold; }

.highlight .nf { color: #900; font-weight: bold; }

.highlight .nn { color: #555; }

.highlight .nt { color: #000080; }

.highlight .nv { color: #008080; }

.highlight .ow { font-weight: bold; }

.highlight .w { color: #bbb; }

.highlight .mf { color: #099; }

.highlight .mh { color: #099; }

.highlight .mi { color: #099; }

.highlight .mo { color: #099; }

.highlight .sb { color: #d14; }

.highlight .sc { color: #d14; }

.highlight .sd { color: #d14; }

.highlight .s2 { color: #d14; }

.highlight .se { color: #d14; }

.highlight .sh { color: #d14; }

.highlight .si { color: #d14; }

.highlight .sx { color: #d14; }

.highlight .sr { color: #009926; }

.highlight .s1 { color: #d14; }

.highlight .ss { color: #990073; }

.highlight .bp { color: #999; }

.highlight .vc { color: #008080; }

.highlight .vg { color: #008080; }

.highlight .vi { color: #008080; }

.highlight .il { color: #099; }

/**   Landing page  */
.wrapper { min-height: 100%; }

.jumbotron { position: relative; display: flex; flex-direction: column; min-height: 70vh; padding: 6em 0 1em 0; align-items: center; justify-content: center; text-align: center; }

.jumbotron.halfpage { margin: 10vh 0; min-height: 40vh; }

.jumbotron div { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 300px; }

.jumbotron h1 { font-size: 32px; display: block !important; padding: 0 1em; }

.jumbotron svg { width: 100%; max-width: 400px; }

.client-carousel { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; margin: 20px 0; }

.client-carousel div { flex: 1; margin: auto 20px; padding: 20px 0; min-width: 180px; max-width: 180px; }

.client-carousel img { width: 100%; }

#projects-link { align-items: center; appearance: none; background-color: #123251; border-radius: 4px; border-width: 0; box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #0b0b22 0 -3px 0 inset; box-sizing: border-box; color: #ebebeb; cursor: pointer; display: inline-flex; font-family: Montserrat, Arial, sans-serif; height: 48px; justify-content: center; line-height: 1; list-style: none; overflow: hidden; padding-left: 16px; padding-right: 16px; position: relative; text-align: left; text-decoration: none; transition: box-shadow .15s,transform .15s; user-select: none; -webkit-user-select: none; touch-action: manipulation; white-space: nowrap; will-change: box-shadow,transform; margin-bottom: 10px; }

#projects-link div { display: flex; flex-direction: row; }

#projects-link div img { height: 30px; padding-right: 10px; margin-right: 10px; border-right: 1px solid #d3d3d3; }

#projects-link:hover { box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #14143d 0 -3px 0 inset; transform: translateY(-1px); }

#projects-link:focus { box-shadow: #2b2b2b 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #0b0b22 0 -3px 0 inset; }

#projects-link:active { box-shadow: #000000 0 3px 7px inset; transform: translateY(1px); }

#projects-link:disabled { cursor: not-allowed; background: rgba(0, 0, 0, 0.08); color: rgba(0, 0, 0, 0.3); }

@media screen and (max-width: 600px) { .jumbotron #title, .jumbotron h1 { font-size: 160%; } .jumbotron #subtitle, .jumbotron h2 { font-size: 100%; } }

.modal { font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif; }

.modal__overlay { z-index: 999; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; }

.modal__container { flex: 1; z-index: 1000; background-color: #fff; padding: 30px; margin: 10px; max-width: 700px; max-height: 80vh; border-radius: 4px; overflow-y: auto; box-sizing: border-box; }

.modal__header { display: flex; justify-content: space-between; align-items: center; }

.modal__title { margin-top: 0; margin-bottom: 0; font-weight: 600; font-size: 1.25rem; line-height: 1.25; color: #00449e; box-sizing: border-box; }

.modal__close { background: transparent; border: 0; }

.modal__header .modal__close:before { content: "\2715"; }

.modal__content { margin-top: 2rem; margin-bottom: 2rem; line-height: 1.5; color: rgba(0, 0, 0, 0.8); }

.modal__btn { font-size: .875rem; padding-left: 1rem; padding-right: 1rem; padding-top: .5rem; padding-bottom: .5rem; background-color: #e6e6e6; color: rgba(0, 0, 0, 0.8); border-radius: .25rem; border-style: none; border-width: 0; cursor: pointer; -webkit-appearance: button; text-transform: none; overflow: visible; line-height: 1.15; margin: 0; -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); transition: -webkit-transform .25s ease-out; transition: transform .25s ease-out; transition: transform .25s ease-out,-webkit-transform .25s ease-out; }

.modal__btn:focus, .modal__btn:hover { -webkit-transform: scale(1.05); transform: scale(1.05); }

.modal__btn-primary { background-color: #00449e; color: #fff; }

/**************************\ Demo Animation Style \**************************/
@keyframes mmfadeIn { from { opacity: 0; }
  to { opacity: 1; } }

@keyframes mmfadeOut { from { opacity: 1; }
  to { opacity: 0; } }

@keyframes mmslideIn { from { transform: translateY(15%); }
  to { transform: translateY(0); } }

@keyframes mmslideOut { from { transform: translateY(0); }
  to { transform: translateY(-10%); } }

.micromodal-slide { display: none; }

.micromodal-slide.is-open { display: block; }

.micromodal-slide[aria-hidden="false"] .modal__overlay { animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1); }

.micromodal-slide[aria-hidden="false"] .modal__container { animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1); }

.micromodal-slide[aria-hidden="true"] .modal__overlay { animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1); }

.micromodal-slide[aria-hidden="true"] .modal__container { animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1); }

button.wide { background: #dddfe9; width: 100%; border-radius: 2px; border: 1px solid #050505; padding: 10px; box-shadow: 1px 1px 8px 0 #EEE; transition: box-shadow 200ms; }

button.wide.bold { font-family: Montserrat, Arial, sans-serif; font-variant: all-small-caps; font-weight: 400; font-size: 14pt; }

button.wide:active { box-shadow: 0px 0px 1px 1px #BBB; }

table { border-collapse: collapse; }

form { display: flex; flex-direction: column; }

form label, form input { width: 100%; }

form label { margin-top: 15px; font-size: 90%; font-weight: 400; }

form input { padding: 5px; }

.titleblock { margin: 20vh 0 5vh 0; }

.titleblock h1, .titleblock h2, .titleblock h3, .titleblock h4, .titleblock h5, .titleblock h6 { margin: 15px 0 0 0; }

.titleblock p { line-height: 1; margin: 0; }

.titleblock .metadata { opacity: 0.6; font-size: 70%; }

pre { tab-size: 4; }

.wrapper { position: relative; }

blockquote { font-style: normal; font-size: 90%; opacity: 0.6; }

.toc { padding: 15px 0; border-left: 1px solid #2a7ae2; margin-bottom: 30px; }

.toc ol { margin-top: 0.5em; margin-bottom: 0; }

.toc li > ol { margin-top: 0; }

#tutorial img { display: block; margin: 30px auto; }

/*# sourceMappingURL=main.css.map */