/* RESET */
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: 100%; font: inherit; vertical-align: baseline; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
.admin { position: fixed; bottom: 0; left: 0; right: 0; font-size: 11px; text-align: center; padding: 10px 0; background: #F7F7F7; }

/* TODO 
video/map responsive class
*/


/* HTML5 display-role reset for older browsers */
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; }

/* GENERAL STUFF */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-size: 16px; color: #000; line-height: 1.5; background: #FEFEFE; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
h1,h2,h3,h4,h5,h6 { font-weight: 700; line-height: 1.25; margin: 0 0 1rem 0; }
h1 { font-size: 2.0rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.0rem; }
h4,h5,h6 { font-size: 1.0rem; }

p + h2, ul + h2, ol + h2, pre + h2 { margin-top: 3rem; }
p { margin: 0 0 1rem 0; }
code { font-family: monospace; font-size: 0.9rem; color: #555; padding: 4px; background: #F7F7F7; }
pre { }
pre, .codeblock { margin: 0 0 1.5rem 0; }
pre::before, .codeblock::before { display: block; content: "CODE"; font-size: 0.7rem; color: #CCC; }
pre code { display: block; color: #FFF; padding: 1.5rem; background: #555; border: 1px dashed #555; overflow-x: auto; }
code.hljs { padding: 1.5rem; }
ul,ol { margin: 0 0 1.5rem 1.5rem; }
ul { list-style: square; }
ol { list-style: decimal; }
ul li, ol li { margin-bottom: 0.25rem; }
dl { margin: 0 0 1rem 0; }
dt { font-weight: bold; }
summary { font-size: 1rem; margin-bottom: 1.5rem; }
summary { padding: 0.5rem 1rem; background: #F7F7F7; border-radius: 7px; cursor: pointer; }

figure { position: relative; text-align: center; padding: 0; margin: 0 0 1.5rem 0; }
figcaption { font-size: 0.75em; font-style: italic; color: #757575; padding: 0.25em 1em; }
blockquote { padding: 1em 0; border-top: 1px dotted #D7D7D7; border-bottom: 1px dotted #D7D7D7; margin: 0 5% 1.5rem 5%;  }
blockquote p { font-family: Geogia, serif; font-size: 1.5rem; font-style: italic; color: #757575;  margin: 0; }
blockquote p:before, blockquote p:after { content: '"'; }
blockquote cite { font-size: 0.8rem; color: #757575; }
img { max-width: 100%; height: auto; }
a { color: #191970; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 0.35rem; transition: 0.25s; }
a:hover, a:focus { color: #4169E1; color: orange; text-decoration: underline; text-decoration-style: dotted; }
time { }
small { font-size: 0.8rem; }
b,strong { font-weight: 700; }
i,em { font-style: italic; }
.text-center { text-align: center; }

/* LAYOUT */
.row { position: relative; clear: both; }
.row-thing { position: absolute; top: 3rem; left: 0; width: 1.25rem; height: 7.1rem; background: #00BFFF; opacity: 0.7; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
.row-nav { padding: 2rem 1.5rem; }
.row-header { padding: 3rem 1.5rem; }
.row-section { padding: 3rem 1.5rem; }
.row-section-alt { background: #FAFAFA; }
.row-footer { padding: 3rem 1.5rem; }

.nav,.header, .section, .footer { position: relative; max-width: 1120px; margin: 0 auto; }
.article-header { max-width: 1024px; }

.grid1 { display: grid; grid-gap: 2rem; grid-template-columns: 1fr; }
.grid2 { display: grid; grid-gap: 2rem; grid-template-columns: 1fr; }
.grid3 { display: grid; grid-gap: 2rem; grid-template-columns: 1fr; }
.grid4 { display: grid; grid-gap: 2rem; grid-template-columns: 1fr; }
.grid-services { display: grid; grid-gap: 0; grid-template-columns: 1fr; }
.columns { column-width: 270px; column-count: 2; column-gap: 3rem; column-rule: 1px solid #CCC; column-fill: balance; }
.columns p {  }
.columns p::before { content: ""; }

/* GRID STYLES */
.grid-date { display: inline-block; font-size: 0.75rem; color: #000; text-transform: uppercase; margin-bottom: 0.5rem; }
.grid-heading { position: relative; font-size: 1.2rem; margin: 0; }
.grid-heading a { color: #000; text-decoration: none; }
.grid-heading a:hover, .grid-heading a:focus { color: #4169E1; color: orange; text-decoration: underline; text-decoration-style: dotted; }
.grid-heading .icon { position: absolute; top: -2rem; left: -2rem; font-size: 2rem; color: orange; }
.article .grid-item h2 { margin-top: 0; }
.grid-strapline { font-size: 1.2rem; margin: 0 0 1rem 0; }
.grid-summary { color: #252525; margin-top: 0.5rem; }
.grid-list { list-style: square; color: #252525; margin-bottom: 0; }
.grid-list li { margin: 0.5rem 0 0 0; }
.grid-cta { margin: 1rem 0 0 0; }
.grid-link { display: block; text-decoration: none; }
.grid-link:hover { text-decoration: none; }
.grid-link:hover .grid-heading { text-decoration: underline; text-decoration-style: dotted; }

.grid-thumb { position: relative; border: 1px solid #DDD; box-shadow: 1px 2px 4px #eee; overflow: hidden; }
.grid-thumb img { display: block; width: 100%; }
.grid-thumb .grid-summary { position: absolute; right: 0; bottom: -100px; left: 0; font-family: Helvetica, Arial, sans-serif; font-size: 0.8rem; color: #FFF; padding: 0.75rem 1rem; background: rgba(51,51,51,0.8); margin: 0; transition: 0.5s; }
.grid-thumb:hover .grid-summary { bottom: 0; }

body {
  counter-reset: my-counter;
}

.grid-pad .grid-item { padding: 2rem; border: 1px solid #EEE; }
.grid-pad-icon .grid-item { position: relative; padding: 0 0 0 4rem; }
.grid-pad-icon .grid-item .icon { position: absolute; top: 0.5rem; left: 0; width: 4rem; opacity: 0.5; }
.icon svg { width: 2.4rem; height: 2.4rem; }



/* NAV */
.logo { font-weight: 700; line-height: 40px; }
.logo a { text-decoration: none; }

.menu { font-weight: 700; text-transform: none; list-style: none; line-height: 40px; margin: 0; transition: 0.5s; }
.menu li { display: inline-block; margin: 0 0.75rem 0 0; }
.menu a { display: block; text-decoration: none; }
.menu a:active, .menu a:hover, .menu a:focus, .menu a.current { color: #4169E1; text-decoration: underline; text-decoration-style: dotted; } 

/* HEADER */
.header-heading { }
.header-strapline { font-size: 1.4rem; margin-top: 2rem; }
.header-lead { font-size: 1.2rem; }
.header-date { font-size: 0.8rem; text-transform: uppercase; }
.header-date::before { content: "\007E  "; }
.header-date::after { content: "  \007E"; }
.header-home h1 { }
.header-home p { max-width: 768px; }
.header-lead { max-width: 960px; margin: 2rem auto 0 auto; }
.article-header h1 { text-align: center; }
.article-header p { text-align: center; }

/* SECTION */
.section-heading { margin: 0 0 2rem 0; }
.section-heading::after {  content: ""; display: block; width: 140px; height: 7px; background: #4169E1; border-radius: 10px; margin-top: 0.75rem; clear: both; }
.section-strapline { font-size: 1.2rem; margin: 0 0 2rem 0; }
.section-cta { text-align: center; margin: 3rem 0 0 0;  }

/* ENTRIES */


/* ENTRY */
.post { max-width: 960px; margin: 0 auto; }
.post figure { margin-left: -2rem; margin-right: -2rem; }
.screenshot { border: 1px solid #DDD; }
.screenshot img { display: block; }
.entry-date { font-size: 0.85rem; font-weight: 700; }
.entry-lead { font-size: 125%; margin-bottom: 3rem; }

/* LISTS */
.checkmark-list { list-style: none; margin-left: 0; }
.checkmark-list li { margin: 0; }
.checkmark-list-icon { float: left; width: 28px; height: 28px; line-height: 28px; padding: 8px; background: gold; border-radius: 48px; }
.checkmark-list-icon img { display: block; width: 12px; height: 12px; }
.checkmark-list-text { padding-left: 42px; }

.Xtick-list { font-family: Helvetica, Arial, sans-serif; font-size: 0.85rem; font-weight: 700; list-style: none; line-height: 1.2; margin: 0; }
.Xtick-list li { position: relative; padding: 0.75rem 1rem 0.75rem 2.5rem; background: #75FFFF; margin: 0 0 0.5rem 0; border-radius: 60px; }
.tick-list { font-family: Helvetica, Arial, sans-serif; font-size: 0.9rem; font-weight: 700; list-style: none; line-height: 1.2; border-top: 1px dotted #CCC; margin: 0; }
.tick-list li { position: relative; padding: 0.875rem 1rem 0.875rem 1.5rem; border-bottom: 1px dotted #CCC; margin: 0; }
.tick-list li span { display: none; position: absolute; left: 0; display: inline-block; }

.bullet-list {  font-size: 1rem; line-height: 1.2; border-bottom: 1px dotted #CCC; }
.bullet-list dt { padding: 0 0 0.75rem 0; }
.bullet-list dd { position: relative; padding: 0.75rem 1rem 0.75rem 1.5rem; border-top: 1px dotted #CCC; margin: 0; }
.bullet-list dd span { display: none; position: absolute; left: 0; display: inline-block; }


/* PAGINATION */
.pagination { clear: both; list-style: none; margin-left: 0; }
.pagination li { display: inline-block; margin-right: 0.5em; }
.pagination li a { display: inline-block; width: 40px; height: 40px; color: #FFF; background: #00BBFF; text-align: center; line-height: 40px; }

/* FOOTER */
.footer-links { font-size: 0.9rem; list-style: none; text-align: center; margin: 0 0 0.5rem 0; }
.footer-links li { display: inline-block; }
.footer-links li::before { content: "\2023  "; } 
.footer-blurb { text-align: center; margin: 0; }

/* LINK */
.link { display: inline-block; font-weight: 700; color: #000; line-height: 1.5; text-decoration: none; text-transform: uppercase; 
-webkit-clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%);
clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%); 
}
.link-pri { background: gold; }
.link-pri:hover, .link-pri:focus { color: #FFF; text-decoration: none; background: #191970; }
.link-sec { background: #6A5ACD;  }
.link-sec:hover, .link-sec:focus { color: #000; text-decoration: none; background: orange; }
.link-l { font-size: 0.9rem; padding: 0.7rem 1.75rem 0.6rem 1.25rem; }
.link-m { font-size: 0.8rem; padding: 0.5rem 1.75rem 0.5rem 1.25rem; }
.link-s { font-size: 0.7rem; padding: 0.5rem 1.75rem 0.5rem 1.25rem; }
.link span { display: block; width: 0; height: 1px; background: transparent; margin: 0 auto; transition: 0.5s; }
.link:hover span { width: 100%; background: #FFF; }

/* FORMS */
.form-contact { max-width: 768px; }
form p { margin-bottom: 1.5rem; }
form ul { list-style: none; margin-left: 0; margin-bottom: 1.5rem;  }
form dl { margin-bottom: 1.5rem; }
form dt { font-size: 1rem; color: #333; margin: 0 0 0.5rem 0; }
form dd {}
label { display: block; font-size: 1rem; margin-bottom: 0.25em; }
form small { display: block; margin-bottom: 0.25rem; }
fieldset { margin: 0 0 2rem 0; }
legend { font-size: 1.2rem; font-weight: 700; text-transform: uppercase; margin-bottom: 2rem; }

input,select,textarea,button { font-family: inherit; box-sizing: border-box; }
input[type='text'],input[type='tel'],input[type='email'],input[type='password'],input[type='number'] { width: 100%; height: 48px; font-size: 16px; text-indent: 0.5rem; padding: 0; border: 1px solid #00BFFF; }
input[type='number'] { width: 60px; }
textarea { width: 100%; height: 170px; font-size: 16px; padding: 0.5rem; border: 1px solid #00BFFF; }
input:focus, textarea:focus { border: 1px solid orange; }
button[type='submit'] { width: 100%; height: 48px; font-size: 16px; font-weight: 700; color: #FFF; padding: 0; background: orange; border: 0; border-radius: 7px; margin: 0; }
button:hover, .button:focus { background: #6A5ACD; }
.grid-form-icon { display: none; }


/* QUEEERIES */
@media screen and (min-width: 480px) {
.grid4 { display: grid; grid-gap: 2em; grid-template-columns: 1fr 1fr; }
}

@media screen and (min-width: 640px) {
.logo { float: left; }
.menu { display: block; text-align: right; }
.menu li { display: inline-block; margin: 0 0 0 1.5rem; }
.grid { display: grid; grid-gap: 2em; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.grid2 { display: grid; grid-gap: 2em; grid-template-columns: 1fr 1fr; }
.link { display: inline-block; }
}

@media screen and (min-width: 768px) {
body { font-size: 18px; }
h1 { font-size: 3.6rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.2rem; }
h4,h5,h6 { font-size: 1.2rem; }
.header-strapline { font-size: 1.6rem; }
.section-heading { font-size: 2rem; }
.section-strapline { font-size: 1.6rem; }
.grid-heading { font-size: 1.4rem; }
.grid-strapline { font-size: 1.6rem; }
.grid3 { display: grid; grid-gap: 2rem; grid-template-columns: 1fr 1fr; }
.grid-services { display: grid; grid-column-gap: 3rem; grid-template-columns: 3fr 2fr; }

/* BITS */
.x { position: absolute; z-index: 1; border-radius: 1600px; opacity: 0.5; }
.x1 { right: 0; bottom: 60px; width: 160px; height: 160px; background: #0000FF; opacity: 0.5; animation-name: x1; animation-duration: 2s; animation-iteration-count: 1; transform: scale(1, 1); }
.x2 { right: 160px; bottom: 20px; width: 70px; height: 70px; background: #00FF00; opacity: 0.5; animation-name: x2; animation-duration: 2s; animation-iteration-count: 1; transform: scale(1, 1); }
.x3 { right: 240px; bottom: 0; width: 40px; height: 40px; background: #FF0000; opacity: 0.5; animation-name: x3; animation-duration: 2s; animation-iteration-count: 1;  transform: scale(1, 1); }
@keyframes x1 {
  0% {bottom:-160px;transform: scale(0, 0);opacity: 0;} 
  20% {bottom:-160px;transform: scale(0, 0);opacity: 0;}
  60% {bottom:80px;transform: scale(1.25, 1.25);opacity: 1;}
  100% {bottom:60px;transform: scale(1, 1);opacity: 0.5;}
}
@keyframes x2 {
  0% {bottom:0;transform: scale(0, 0);opacity: 0;} 
  10% {bottom:0;transform: scale(0, 0);opacity: 0;}
  50% {bottom:40px;transform: scale(1.5, 1.5);opacity: 1;}
  90% {bottom:20px;transform: scale(1, 1);opacity: 0.5;}
}
@keyframes x3 {
  0% {bottom:0;transform: scale(0, 0);opacity: 0;} 
  0% {bottom:0;transform: scale(0, 0);opacity: 0;}
  40% {bottom:20px;transform: scale(1.75, 1.75);opacity: 1;}
  80% {bottom:0;transform: scale(1, 1);opacity: 0.5;}
}

.y { position: absolute; opacity: 1; }
.y { top: 0.35rem; left: -0.60rem; width: 20px; height: 20px; background: #FF9900; animation-name: y; animation-duration: 3s; animation-iteration-count: 1; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
@keyframes y {
  0% {opacity:0;}
  85% {opacity:0;}
  90% {opacity:1;background: #FFFF00;transform: scale(1, 1);}
  95% {opacity:1;background: #FFFF00;transform: scale(2, 2);}
  100% {opacity:1;background: #FF9900;transform: scale(1, 1);}
}


}

@media screen and (min-width: 1024px) {

code {  }
.grid2 { display: grid; grid-gap: 2rem; grid-template-columns: 1fr 1fr; }
.grid3 { display: grid; grid-gap: 2rem; grid-template-columns: 1fr 1fr 1fr; }
.grid4 { display: grid; grid-gap: 2rem; grid-template-columns: 1fr 1fr 1fr 1fr; }
.entry-lead { font-size: 125%; }

}