/* Colors */
/* https://www.colorhexa.com/22a8c3 */
:root {
	--white: #fff;
	--graylightest: #fafafa;
	--graylighter: #eee;
	--graylight: #bdbdbd;
	--graymedium: #9e9e9e;
	--graydark: #757575;
	--graydarkest: #424242;
  --black: #1d252d;

  --primary-900: #00363c;
  --primary-700: #005963;
  --primary-500: #007d8a;
  --primary-400: #3397a1;
  --primary-300: #66b1b9;
  --primary-200: #99cbd0;
  --primary-100: #cce5e8;
  --primary-50: #e7f3f4;
  --primary-25: #f0f5f5;

  --secondary-700: #a9005b;
  --secondary-500: #d00070;
  --secondary-400: #f73385;
  --secondary-300: #f76698;
  --secondary-200: #f799aa;
  --secondary-100: #ffd0e9; 
  --secondary-50: #fef3f9;
  --secondary-25: #f8f2f4;

  --tertiary-900: #3f3200;
  --tertiary-400: #ffd018;
  --tertiary-200: #ffe066;
  --tertiary-25: #f7f6f2;

  --color-notice-info-400: var(--primary-400);
  --color-notice-info-25: var(--primary-25);

  --color-notice-danger-400: #a13d33;
  --color-notice-danger-300: #bf483c;
  --color-notice-danger-200: #ca6358;
  --color-notice-danger-25: #fbf1f0;

  --color-notice-warning-400: #e6d819;
  --color-notice-warning-25: #f6f6f0;

    /* Accessible palette, https://github.com/cdnplanet/cdnplanet-website/issues/60#issuecomment-804726834 */
  --red: #cc3311;
  --green: #009988;
  --blue: #0077bb;
  --cyan: #33bbee;
  --orange: #ee7733;
  --magenta: #ee3377;
  
  /* --primary-100: #c7eef5;
  --primary-500: #22a8c3; 
  --primary-700: #177082;
  --primary-900: #08262d; */

  /* --secondary-400: #c322a8;
  --secondary-600: #91197d; */

  /* --red: #c33d22;
  --green: #22c33d; */
}

/*!
 * Kraken v7.5.2: A lightweight front-end boilerplate
 * (c) 2017 Chris Ferdinandi
 * MIT License
 * https://github.com/cferdinandi/kraken
 */

/**
 * @section Normalize.css
 * Normalize.css base with custom code.
 * Additional normalize styles incorporated throughout components.
 * @link http://necolas.github.io/normalize.css/
 */
/**
  * Mobile screen resizing
  * @link http://dev.w3.org/csswg/css-device-adapt/
  */
@-webkit-viewport {
  width: device-width;
  zoom: 1.0;
}

@-moz-viewport {
    width: device-width;
  zoom: 1.0;
}

@-ms-viewport {
    width: device-width;
  zoom: 1.0;
}

@-o-viewport {
    width: device-width;
  zoom: 1.0;
}

@viewport {
  width: device-width;
  zoom: 1.0;
}

/**
 * Remove the tap delay in webkit
 * @link https://medium.com/@adactio/delay-a9df9edceef3#.7dmbl3xow
 */
/* line 23, /Users/cferdinandi/Sites/kraken/src/sass/components/_normalize.scss */
a,
button,
input,
select,
textarea,
label,
summary {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

/**
 * Add box sizing to everything
 * @link http://www.paulirish.com/2012/box-sizing-border-box-ftw/
 */
/* line 38, /Users/cferdinandi/Sites/kraken/src/sass/components/_normalize.scss */
*,
*:before,
*:after {
    box-sizing: border-box;
}

/**
 * 1. Set default font family to default.
 * 2. Force scrollbar display to prevent jumping on pages.
 * 3. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
/* line 51, /Users/cferdinandi/Sites/kraken/src/sass/components/_normalize.scss */
html {
    font-family: "Helvetica Neue", Arial, sans-serif;
  /* 1 */
    overflow-y: scroll;
  /* 2 */
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
  /* 3 */
}

/**
 * Remove default margin.
 */
/* line 60, /Users/cferdinandi/Sites/kraken/src/sass/components/_normalize.scss */
body {
    margin: 0;
}

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
/* line 70, /Users/cferdinandi/Sites/kraken/src/sass/components/_normalize.scss */
article,
aside,
cite,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
    display: block;
}

/*
 * Add the correct display in all browsers.
 */
/* line 89, /Users/cferdinandi/Sites/kraken/src/sass/components/_normalize.scss */
summary {
    display: list-item;
    cursor: pointer;
}

/**
 * Correct `inline-block` display not defined in IE 8/9.
 */
/* line 96, /Users/cferdinandi/Sites/kraken/src/sass/components/_normalize.scss */
audio,
canvas,
progress,
video {
    display: inline-block;
  /* 1 */
}

/**
 * Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
/* line 106, /Users/cferdinandi/Sites/kraken/src/sass/components/_normalize.scss */
progress {
    vertical-align: baseline;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
/* line 114, /Users/cferdinandi/Sites/kraken/src/sass/components/_normalize.scss */
audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Prevent img and video elements from spilling outside of the page on smaller screens.
 */
/* line 122, /Users/cferdinandi/Sites/kraken/src/sass/components/_normalize.scss */
img,
video {
    max-width: 100%;
    height: auto;
}

/**
 * Prevent iframe, object, and embed elements from spilling outside of the page on smaller screens.
 * height: auto causes iframes to smush, so it's omitted here.
 */
/* line 132, /Users/cferdinandi/Sites/kraken/src/sass/components/_normalize.scss */
iframe,
object,
embed {
  max-width: 100%;
}

/**
 * Hide the template element in IE, Safari, and Firefox < 22.
 */
/**
 * 1. Remove border when inside `a` element in IE 8/9/10.
 * 2. Prevents IE from making scaled images look like crap
 */
/* line 149, /Users/cferdinandi/Sites/kraken/src/sass/components/_normalize.scss */
img {
  border: 0;
  /* 1 */
  -ms-interpolation-mode: bicubic;
  /* 2 */
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
/* line 157, /Users/cferdinandi/Sites/kraken/src/sass/components/_normalize.scss */
svg:not(:root) {
  overflow: hidden;
}

/**
 * Address inconsistent margin.
 */
/* line 164, /Users/cferdinandi/Sites/kraken/src/sass/components/_normalize.scss */
figure {
  margin: 0;
}

/**
 * @workaround Remove focus from <main> element when using tabindex="-1" hack for skipnav link
 * @link https://code.google.com/p/chromium/issues/detail?id=37721
 */
/* line 172, /Users/cferdinandi/Sites/kraken/src/sass/components/_normalize.scss */
.tabindex:focus {
  outline: none;
}

/**
 * @section Grid
 * Structure and layout
 */
/**
 * Base grid styles: single column
 */
/* line 9, /Users/cferdinandi/Sites/kraken/src/sass/components/_grid.scss */
.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 76em;
  width: 90%;
}

/* line 16, /Users/cferdinandi/Sites/kraken/src/sass/components/_grid.scss */
.row {
  margin-left: -1.4%;
  margin-right: -1.4%;
}

/* line 21, /Users/cferdinandi/Sites/kraken/src/sass/components/_grid.scss */
.grid-fourth, .grid-third, .grid-half, .grid-two-thirds, .grid-three-fourths, .grid-full, .grid-dynamic {
  float: left;
  padding-left: 1.6%;
  padding-right: 1.6%;
  width: 100%;
}

/**
 * Reverses order of grid for content choreography
 */
/* line 38, /Users/cferdinandi/Sites/kraken/src/sass/components/_grid.scss */
.grid-flip {
  float: right;
}

/**
 * Add columns to grid on bigger screens
 */
@media (min-width: 20em) {
  /* line 49, /Users/cferdinandi/Sites/kraken/src/sass/components/_grid.scss */
  .row-start-xsmall .grid-fourth {
    width: 25%;
  }
  /* line 49, /Users/cferdinandi/Sites/kraken/src/sass/components/_grid.scss */
  .row-start-xsmall .grid-third {
    width: 33.33333%;
  }
  /* line 49, /Users/cferdinandi/Sites/kraken/src/sass/components/_grid.scss */
  .row-start-xsmall .grid-half {
    width: 50%;
  }
  /* line 49, /Users/cferdinandi/Sites/kraken/src/sass/components/_grid.scss */
  .row-start-xsmall .grid-two-thirds {
    width: 66.66667%;
  }
  /* line 49, /Users/cferdinandi/Sites/kraken/src/sass/components/_grid.scss */
  .row-start-xsmall .grid-three-fourths {
    width: 75%;
  }
  /* line 49, /Users/cferdinandi/Sites/kraken/src/sass/components/_grid.scss */
  .row-start-xsmall .grid-full {
    width: 100%;
  }
}

@media (min-width: 30em) {
  /* line 49, /Users/cferdinandi/Sites/kraken/src/sass/components/_grid.scss */
  .row-start-small .grid-fourth {
    width: 25%;
  }
  /* line 49, /Users/cferdinandi/Sites/kraken/src/sass/components/_grid.scss */
  .row-start-small .grid-third {
    width: 33.33333%;
  }
  /* line 49, /Users/cferdinandi/Sites/kraken/src/sass/components/_grid.scss */
  .row-start-small .grid-half {
    width: 50%;
  }
  /* line 49, /Users/cferdinandi/Sites/kraken/src/sass/components/_grid.scss */
  .row-start-small .grid-two-thirds {
    width: 66.66667%;
  }
  /* line 49, /Users/cferdinandi/Sites/kraken/src/sass/components/_grid.scss */
  .row-start-small .grid-three-fourths {
    width: 75%;
  }
  /* line 49, /Users/cferdinandi/Sites/kraken/src/sass/components/_grid.scss */
  .row-start-small .grid-full {
    width: 100%;
  }
}

@media (min-width: 60em) {
  /* line 49, /Users/cferdinandi/Sites/kraken/src/sass/components/_grid.scss */
  .grid-fourth {
    width: 25%;
  }
  /* line 49, /Users/cferdinandi/Sites/kraken/src/sass/components/_grid.scss */
  .grid-third {
    width: 33.33333%;
  }
  /* line 49, /Users/cferdinandi/Sites/kraken/src/sass/components/_grid.scss */
  .grid-half {
    width: 50%;
  }
  /* line 49, /Users/cferdinandi/Sites/kraken/src/sass/components/_grid.scss */
  .grid-two-thirds {
    width: 66.66667%;
  }
  /* line 49, /Users/cferdinandi/Sites/kraken/src/sass/components/_grid.scss */
  .grid-three-fourths {
    width: 75%;
  }
  /* line 49, /Users/cferdinandi/Sites/kraken/src/sass/components/_grid.scss */
  .grid-full {
    width: 100%;
  }
  /* line 55, /Users/cferdinandi/Sites/kraken/src/sass/components/_grid.scss */
  .offset-fourth {
    margin-left: 25%;
  }
  /* line 55, /Users/cferdinandi/Sites/kraken/src/sass/components/_grid.scss */
  .offset-third {
    margin-left: 33.33333%;
  }
  /* line 55, /Users/cferdinandi/Sites/kraken/src/sass/components/_grid.scss */
  .offset-half {
    margin-left: 50%;
  }
  /* line 55, /Users/cferdinandi/Sites/kraken/src/sass/components/_grid.scss */
  .offset-two-thirds {
    margin-left: 66.66667%;
  }
  /* line 55, /Users/cferdinandi/Sites/kraken/src/sass/components/_grid.scss */
  .offset-three-fourths {
    margin-left: 75%;
  }
  /* line 55, /Users/cferdinandi/Sites/kraken/src/sass/components/_grid.scss */
  .offset-full {
    margin-left: 100%;
  }
}

/**
 * Dynamic grid
 */
@media (min-width: 20em) {
  /* line 71, /Users/cferdinandi/Sites/kraken/src/sass/components/_grid.scss */
  .grid-dynamic {
    width: 50%;
  }
}

@media (min-width: 30em) {
  /* line 71, /Users/cferdinandi/Sites/kraken/src/sass/components/_grid.scss */
  .grid-dynamic {
    width: 33.33333%;
  }
}

@media (min-width: 40em) {
  /* line 71, /Users/cferdinandi/Sites/kraken/src/sass/components/_grid.scss */
  .grid-dynamic {
    width: 25%;
  }
}


.maroon-light { color: var(--primary-500); }
.maroon-dark { color: var(--primary-700); }
.blue, .info { color: #3357cd; }
.green, .success { color:#21d94a; }
.orange, .warning { color:#ffbc27; }
.red, .danger { color: var(--red); }
.gray { color:#798486; } /* hsl 190 5 50 */
.gray-medium { color: var(--graymedium); }
.gray-light { color:#a2aaab; }
.gray-lighter { color:#cbd0d0; }
.gray-lightest { color:var(--graylighter); }
.white { color: var(--white); }
.black { color: var(--black); }
.bg-maroon-light { background-color: var(--primary-500); }
.bg-gray-lightest { background-color:var(--graylighter); }
/**
 * @section Typography
 * Sets font styles for entire site
 */
/* line 6, /Users/cferdinandi/Sites/kraken/src/sass/components/_typography.scss */
body {
  background: var(--white);
  color: var(--black);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 100%;
  line-height: 1.5;
}

@media (min-width: 40em) {
  /* line 6, /Users/cferdinandi/Sites/kraken/src/sass/components/_typography.scss */
  body {
    line-height: 1.5625;
  }
}

/* line 18, /Users/cferdinandi/Sites/kraken/src/sass/components/_typography.scss */
p {
  margin: 0 0 1.5625em;
}

/**
 * Hyperlink styling
 */
a {
  color: var(--primary-500);
	background-color: transparent;
  text-decoration: none;
}

a:hover {
  background-image: linear-gradient(to right,#007d8a,#007d8a,#007d8a);
	background-size: 100% 2px;
	background-position: center bottom;
  background-repeat: no-repeat;
  padding-bottom: 0.1em;
}
a:focus {
  outline: 2px dashed var(--primary-500);
  background-image: none;
  padding-bottom: 0;
}
a:active {
	background-color: var(--primary-100);
	background-image: linear-gradient(to right, var(--primary-100), var(--primary-100), var(--primary-100));
  outline: 0;
}

/** 
 * Links in text: style with an underline to improve accessibility 
 * These styles are same as for other links on hover
 */
p a {
  background-image: linear-gradient(to right,#007d8a,#007d8a,#007d8a);
	background-size: 100% 2px;
	background-position: center bottom;
  background-repeat: no-repeat;
  padding-bottom: 0.1em;
}
p a:hover {
	background-color: var(--primary-100);
	background-image: linear-gradient(to right, var(--primary-100), var(--primary-100), var(--primary-100));
  outline: 0;
}

a.image-link,
a.image-link:hover,
a.image-link:focus,
a.image-link:active {
  padding-bottom: 0;
  background-image: none;
  background-color: transparent;
}
a.image-link:focus {
  outline: 2px dashed var(--primary-500);
  background-image: none;
  padding-bottom: 0;
}

.white a { 
  background-image: none;
  color: var(--white);
  cursor: pointer;
}
.white a:hover { 
  text-decoration: underline;
}
.white a:focus {
  outline: 1px dashed var(--white);
  background-image: none;
  padding-bottom: 0;
}


/**
 * Creates block-level links
 */
/* line 57, /Users/cferdinandi/Sites/kraken/src/sass/components/_typography.scss */

/**
 * List styling
 */
/* line 76, /Users/cferdinandi/Sites/kraken/src/sass/components/_typography.scss */
ul,
ol {
  margin: 0 0 1.5625em 2em;
  padding: 0;
}

/* line 82, /Users/cferdinandi/Sites/kraken/src/sass/components/_typography.scss */
ul ul,
ul ol,
ol ol,
ol ul {
  margin-bottom: 0;
}

/* line 89, /Users/cferdinandi/Sites/kraken/src/sass/components/_typography.scss */
dl,
dd {
  margin: 0;
  padding: 0;
}

/* line 95, /Users/cferdinandi/Sites/kraken/src/sass/components/_typography.scss */
dd {
  margin-bottom: 1.5625em;
}

/* line 99, /Users/cferdinandi/Sites/kraken/src/sass/components/_typography.scss */
dt {
  font-weight: 700;
}

/**
 * Removes list styling.
 * For semantic reasons, should only be used on unordered lists.
 */
/* line 107, /Users/cferdinandi/Sites/kraken/src/sass/components/_typography.scss */
.list-unstyled {
  margin-left: 0;
  list-style: none;
}

/**
 * Display lists on a single line.
 */
/* line 116, /Users/cferdinandi/Sites/kraken/src/sass/components/_typography.scss */
.list-inline {
  list-style: none;
  margin-left: -0.5em;
  margin-right: -0.5em;
  padding: 0;
}

/* line 123, /Users/cferdinandi/Sites/kraken/src/sass/components/_typography.scss */
.list-inline > li {
  display: inline-block; /* inline */
  margin-left: 0.5em;
  margin-right: 0.5em;
}

/**
 * Heading styling for h1 through h6 elements.
 * Heading class lets you use one heading type for semantics, but style it as another heading type.
 */
/* line 135, /Users/cferdinandi/Sites/kraken/src/sass/components/_typography.scss */
h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 0.7em;
  padding: 1em 0 0;
  word-wrap: break-word;
}

/* line 143, /Users/cferdinandi/Sites/kraken/src/sass/components/_typography.scss */
h1,
.h1 {
  font-size: 1.5em;
  padding-top: .5em;
}

@media (min-width: 40em) {
  /* line 143, /Users/cferdinandi/Sites/kraken/src/sass/components/_typography.scss */
  h1,
  .h1 {
    font-size: 1.75em;
  }
}

/* line 153, /Users/cferdinandi/Sites/kraken/src/sass/components/_typography.scss */
h2,
.h2 {
  font-size: 1.3125em;
}

/* line 158, /Users/cferdinandi/Sites/kraken/src/sass/components/_typography.scss */
h3,
.h3 {
  font-size: 1.1875em;
}

/* line 163, /Users/cferdinandi/Sites/kraken/src/sass/components/_typography.scss */
h4, h5, h6,
.h4, .h5, .h6 {
  font-size: 1em;
}

/* line 168, /Users/cferdinandi/Sites/kraken/src/sass/components/_typography.scss */
h4,
.h4 {
  text-transform: uppercase;
}

/**
 * Lines, Quotes and Emphasis
 */
/* line 178, /Users/cferdinandi/Sites/kraken/src/sass/components/_typography.scss */
hr {
  border: 0;
  border-top: 1px solid var(--graylighter);
  border-bottom: 0 solid var(--white);
  box-sizing: content-box;
  margin: 2em auto;
  overflow: visible;
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
/* line 190, /Users/cferdinandi/Sites/kraken/src/sass/components/_typography.scss */
b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
/* line 198, /Users/cferdinandi/Sites/kraken/src/sass/components/_typography.scss */
b,
strong {
  font-weight: 700;
}

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
/* line 207, /Users/cferdinandi/Sites/kraken/src/sass/components/_typography.scss */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */
}

/**
 * Address styling not present in Safari and Chrome.
 */
/* line 216, /Users/cferdinandi/Sites/kraken/src/sass/components/_typography.scss */
dfn {
  font-style: italic;
}

/**
 * Address styling not present in IE 8/9.
 */
/* line 223, /Users/cferdinandi/Sites/kraken/src/sass/components/_typography.scss */
mark {
  background: #ff0;
  color: #000000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
/* line 231, /Users/cferdinandi/Sites/kraken/src/sass/components/_typography.scss */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
/* line 238, /Users/cferdinandi/Sites/kraken/src/sass/components/_typography.scss */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

/* line 246, /Users/cferdinandi/Sites/kraken/src/sass/components/_typography.scss */
sup {
  top: -0.5em;
}

/* line 250, /Users/cferdinandi/Sites/kraken/src/sass/components/_typography.scss */
sub {
  bottom: -0.25em;
}

/**
 * Blockquotes
 */
/* line 259, /Users/cferdinandi/Sites/kraken/src/sass/components/_typography.scss */
blockquote {
  /* font-size: 1.1875em; */
  font-style: italic;
  margin: 0 0 1.5625em;
  padding-left: 0.84211em;
  padding-right: 0.84211em;
  border-left: 4px solid #cbd0d0;
}

/* line 266, /Users/cferdinandi/Sites/kraken/src/sass/components/_typography.scss */
blockquote cite {
  color: #808080;
  font-size: 0.84211em;
  padding-top: 1em;
}

/* line 273, /Users/cferdinandi/Sites/kraken/src/sass/components/_typography.scss */
blockquote,
q {
  quotes: none;
}

/* line 278, /Users/cferdinandi/Sites/kraken/src/sass/components/_typography.scss */
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
}

/**
 * @section Code
 * Styling for code and preformatted text.
 */
/* line 6, /Users/cferdinandi/Sites/kraken/src/sass/components/_code.scss */
code,
kbd,
pre,
samp {
  border-radius: 1px;
  font-family: Menlo, Monaco, "Courier New", monospace;
  font-size: 0.875em;
}

/* line 15, /Users/cferdinandi/Sites/kraken/src/sass/components/_code.scss */
code {
  /* background-color: var(--graylighter);
  color: var(--red); */
  background-color: var(--secondary-50); /* #ffebf6 */
  color: var(--secondary-700);
  margin-right: 0.33em; margin-left: 0.33em;
  padding: 0.25em 0.5em;
  word-wrap: break-word;
}

/* line 22, /Users/cferdinandi/Sites/kraken/src/sass/components/_code.scss */
pre {
  background-color: var(--graylighter);
  color: var(--secondary-700);
  display: block;
  line-height: 1.5;
  margin-bottom: 1.5625em;
  overflow: auto;
  padding: 0.8125em;
  -moz-tab-size: 4;
    -o-tab-size: 4;
       tab-size: 4;
  white-space: pre-wrap;
  word-break: break-all;
}

/* line 33, /Users/cferdinandi/Sites/kraken/src/sass/components/_code.scss */
pre code {
  background-color: transparent;
  border: 0;
  color: inherit;
  font-size: 1em;
  padding: 0;
}

/**
 * @section Buttons
 * Styling for CSS buttons.
 */
/**
 * Primary buttons
 */
/* line 10, /Users/cferdinandi/Sites/kraken/src/sass/components/_buttons.scss */
.btn,
a .btn {
  position: relative;
  background-color: var(--secondary-500);
  border: 1px solid var(--secondary-500);
  border-radius: 1px;
  color: var(--white);
  display: inline-block;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.2;
  margin-right: 0.3125em;
  margin-bottom: 0.3125em;
  padding: 0.5em 0.6875em;
}

/* line 23, /Users/cferdinandi/Sites/kraken/src/sass/components/_buttons.scss */
.btn:hover, a .btn:hover, 
.btn:focus, a .btn:focus, 
.btn:active, a .btn:active, .btn.active {
  background: none;
  background-color: var(--secondary-700);
  border-color: var(--secondary-700);
  color: var(--white);
  text-decoration: none;
  padding: 0.5em 0.6875em;
}

.btn:focus {
  outline: 4px solid var(--secondary-200);
}
/**
 * Secondary buttons
 */
/* line 41, /Users/cferdinandi/Sites/kraken/src/sass/components/_buttons.scss */
.btn-secondary {
  background-color: #808080;
  border-color: #808080;
}

/* line 45, /Users/cferdinandi/Sites/kraken/src/sass/components/_buttons.scss */
.btn-secondary:hover,
a .btn-secondary:hover, .btn-secondary:focus,
a .btn-secondary:focus, .btn-secondary:active,
a .btn-secondary:active, .btn-secondary.active {
  background-color: #5a5a5a;
  border-color: #5a5a5a;
}

/**
 * Active state
 */
/* line 61, /Users/cferdinandi/Sites/kraken/src/sass/components/_buttons.scss */
.btn:active,
.btn.active {
  box-shadow: inset 0 0.15625em 0.25em rgba(0, 0, 0, 0.15), 0 1px 0.15625em rgba(0, 0, 0, 0.05);
  outline: 0;
}

/**
 * Disabled state
 */
/* line 71, /Users/cferdinandi/Sites/kraken/src/sass/components/_buttons.scss */
.btn.disabled,
.btn[disabled] {
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}

/**
 * Button size
 */
/* line 83, /Users/cferdinandi/Sites/kraken/src/sass/components/_buttons.scss */
.btn-large,
a .btn-large {
  font-size: 1em;
  line-height: normal;
}


.btn-large, a .btn-large,
.btn-large:hover, a .btn-large:hover,
.btn-large:active, a .btn-large:active, .btn-large.active {
  padding: 0.6875em 0.9375em;
}

/**
 * Block-level buttons
 */
/* line 93, /Users/cferdinandi/Sites/kraken/src/sass/components/_buttons.scss */
.btn-block,
input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
  display: block;
  margin-right: 0;
  padding-right: 0;
  padding-left: 0;
  width: 100%;
}

/**
 * General styles
 */
/* line 108, /Users/cferdinandi/Sites/kraken/src/sass/components/_buttons.scss */
.btn,
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  /**
   * @workaround Override default button styling
   * @affected Webkit/Firefox
   */
  -webkit-appearance: none;
  width: initial;
}

/**
 * Remove right margin on last element and inputs
 */
/* line 129, /Users/cferdinandi/Sites/kraken/src/sass/components/_buttons.scss */
.btn:last-child,
input.btn {
  margin-right: 0;
}

/**
 * @section Forms
 * Styling for form elements.
 */
/* line 6, /Users/cferdinandi/Sites/kraken/src/sass/components/_forms.scss */
form,
fieldset {
  margin-bottom: 1.5625em;
}

/* line 11, /Users/cferdinandi/Sites/kraken/src/sass/components/_forms.scss */
fieldset {
  border: 0;
  padding: 0;
}

/* line 16, /Users/cferdinandi/Sites/kraken/src/sass/components/_forms.scss */
legend,
label {
  display: block;
  font-weight: 400;
  margin: 0 0 0.3125em;
  padding: 0;
}

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
/* line 30, /Users/cferdinandi/Sites/kraken/src/sass/components/_forms.scss */
button,
input,
optgroup,
select,
textarea {
  color: #555555;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */
  padding: 0.3125em;
}

select {
  background-color: var(--white);
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
/* line 44, /Users/cferdinandi/Sites/kraken/src/sass/components/_forms.scss */
button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
/* line 54, /Users/cferdinandi/Sites/kraken/src/sass/components/_forms.scss */
button,
select {
  text-transform: none;
}

/* line 59, /Users/cferdinandi/Sites/kraken/src/sass/components/_forms.scss */
input,
textarea,
select {
  border: 1px solid #b8b8b8;
  border-radius: 1px;
  display: block;
  line-height: 1.5;
  margin-bottom: 1.1875em;
  width: 100%;
}

@media (min-width: 40em) {
  /* line 59, /Users/cferdinandi/Sites/kraken/src/sass/components/_forms.scss */
  input,
  textarea,
  select {
    line-height: 1.5625;
  }
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
/* line 78, /Users/cferdinandi/Sites/kraken/src/sass/components/_forms.scss */
optgroup {
    font-weight: 700;
}

/* line 82, /Users/cferdinandi/Sites/kraken/src/sass/components/_forms.scss */
form button,
form .button {
    margin-bottom: 1.1875em;
}

/* line 87, /Users/cferdinandi/Sites/kraken/src/sass/components/_forms.scss */
textarea {
    height: 12em;
    overflow: auto;
}

/* line 92, /Users/cferdinandi/Sites/kraken/src/sass/components/_forms.scss */
[type="image"],
[type="checkbox"],
[type="radio"] {
    cursor: pointer;
    display: inline-block;
    height: auto;
    margin-bottom: 0.3125em;
    padding: 0;
    width: auto;
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
/* line 108, /Users/cferdinandi/Sites/kraken/src/sass/components/_forms.scss */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/* line 113, /Users/cferdinandi/Sites/kraken/src/sass/components/_forms.scss */
input:focus,
textarea:focus {
  border-color: rgba(0, 178, 197, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0.5em rgba(0, 178, 197, 0.6);
  outline: 0;
  outline: thin dotted \9;
}

/* line 121, /Users/cferdinandi/Sites/kraken/src/sass/components/_forms.scss */
[type="file"]:focus,
[type="checkbox"]:focus,
select:focus {
  outline: thin dotted;
  outline: 0.3125em auto -webkit-focus-ring-color;
  outline-offset: -0.125em;
}

/**
 * Remove the inner border and padding in Firefox.
 */
/* line 133, /Users/cferdinandi/Sites/kraken/src/sass/components/_forms.scss */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
/* line 145, /Users/cferdinandi/Sites/kraken/src/sass/components/_forms.scss */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
/* line 157, /Users/cferdinandi/Sites/kraken/src/sass/components/_forms.scss */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/**
 * Inline inputs
 */
/* line 166, /Users/cferdinandi/Sites/kraken/src/sass/components/_forms.scss */
.input-inline {
  display: inline-block;
  vertical-align: middle;
  width: auto;
}

/**
 * Condensed inputs
 */
/* line 176, /Users/cferdinandi/Sites/kraken/src/sass/components/_forms.scss */
.input-condensed {
  padding: 1px 0.3125em;
  font-size: 0.9375em;
}

/**
 * Search
 */
/**
  * 1. Correct the odd appearance in Chrome and Safari.
  * 2. Correct the outline style in Safari.
  */
/* line 191, /Users/cferdinandi/Sites/kraken/src/sass/components/_forms.scss */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
/* line 201, /Users/cferdinandi/Sites/kraken/src/sass/components/_forms.scss */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Create rounded search bar
 */
/* line 210, /Users/cferdinandi/Sites/kraken/src/sass/components/_forms.scss */
.input-search {
  width: 97%;
  margin-bottom: 2%;
  padding-left: 0.9375em;
  padding-right: 2.5em;
  border-radius: 2px; /* 1.3125em */
  -webkit-transition: width 300ms ease-in;
          transition: width 300ms ease-in;
}

@media (min-width: 40em) {
  /* line 210, /Users/cferdinandi/Sites/kraken/src/sass/components/_forms.scss */
  .input-search {
    width: 97%;
  }
}

/**
 * Special styling for search icon as button
 */
/* line 226, /Users/cferdinandi/Sites/kraken/src/sass/components/_forms.scss */
.btn-search {
  display: inline;
  color: #808080;
  border: none;
  background: none;
  margin-left: -2.5em;
  margin-bottom: 0;
}

/* line 234, /Users/cferdinandi/Sites/kraken/src/sass/components/_forms.scss */
.btn-search .icon {
  fill: #808080;
}

/* line 238, /Users/cferdinandi/Sites/kraken/src/sass/components/_forms.scss */
.btn-search:hover {
  color: #5a5a5a;
}

/* line 241, /Users/cferdinandi/Sites/kraken/src/sass/components/_forms.scss */
.btn-search:hover .icon {
  fill: #5a5a5a;
}

/**
 * @section SVGs
 * SVG icon sprite styling.
 * @link http://css-tricks.com/svg-sprites-use-better-icon-fonts/
 * @link http://css-tricks.com/svg-use-external-source/
 */
/**
 * Basic styles
 * Only displayed when SVGs are supported to avoid large empty spaces
 */
/* line 12, /Users/cferdinandi/Sites/kraken/src/sass/components/_svg.scss */
.icon {
  display: inline-block;
  fill: currentColor;
  height: 0;
  width: 0;
}

/* line 18, /Users/cferdinandi/Sites/kraken/src/sass/components/_svg.scss */
.svg .icon {
  height: 1em;
  width: 1em;
}

/**
 * Hide fallback text if browser supports SVG
 */
/**
 * @section Tables
 * Styling for tables
 */
/* line 6, /Users/cferdinandi/Sites/kraken/src/sass/components/_tables.scss */
table {
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: 1.5625em;
  max-width: 100%;
  width: 100%;
}

/* line 14, /Users/cferdinandi/Sites/kraken/src/sass/components/_tables.scss */
th,
td {
  text-align: left;
  padding: 0.5em;
}

/* line 20, /Users/cferdinandi/Sites/kraken/src/sass/components/_tables.scss */
th {
  /* border-bottom: 0.125em solid var(--graylighter); */
  font-weight: 700;
  vertical-align: bottom;
}

/* line 27, /Users/cferdinandi/Sites/kraken/src/sass/components/_tables.scss */
td {
  /* border-top: 1px solid var(--graylighter); */
  vertical-align: top;
}

/**
 * Adds zebra striping
 */
/* line 35, /Users/cferdinandi/Sites/kraken/src/sass/components/_tables.scss */
.table-striped tbody tr:nth-child(odd) {
  background-color: #f7f7f7;
}
.table-striped tbody tr:nth-child(even) {
  background-color: var(--white);
}
.table-striped th {
 background-color: var(--white); 
}

/**
 * Reduces padding on condensed tables
 */
/* line 43, /Users/cferdinandi/Sites/kraken/src/sass/components/_tables.scss */
.table-condensed th,
.table-condensed td {
  padding: 0.25em;
}

table.valign-middle td {
  vertical-align: middle;
}
table.valign-text-top td {
  vertical-align: text-top;
}
table.td-border-top td {
  border-top: 1px solid var(--graylighter);
}


/**
 * Pure CSS responsive tables
 * Adds label to each cell using the [data-label] attribute
 * @link https://techblog.livingsocial.com/blog/2015/04/06/responsive-tables-in-pure-css/
 */
@media (max-width: 40em) {
  /* line 57, /Users/cferdinandi/Sites/kraken/src/sass/components/_tables.scss */
  .table-responsive thead {
    display: none;
    visibility: hidden;
  }
  /* line 62, /Users/cferdinandi/Sites/kraken/src/sass/components/_tables.scss */
  .table-responsive tr {
    border-top: 1px solid #ededed;
    display: block;
    padding: 0.5em;
  }
  /* line 68, /Users/cferdinandi/Sites/kraken/src/sass/components/_tables.scss */
  .table-responsive td {
    border: 0;
    display: block;
    padding: 0.25em;
  }
  /* line 73, /Users/cferdinandi/Sites/kraken/src/sass/components/_tables.scss */
  .table-responsive td:before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
  }
  table.table-responsive.td-border-top td {
    border-top: none;
  }
}


/**
 * @section Overrides
 * Nudge and tweak alignment, spacing, and visibility.
 */
/**
 * Text sizes
 */
/* line 11, /Users/cferdinandi/Sites/kraken/src/sass/components/_overrides.scss */
.text-small {
  font-size: 0.9375em;
}

.text-smaller {
  font-size: 0.875em;
}

.text-smallest {
  font-size: 0.875em;
}

.text-somewhat-larger {
  font-size: 1.1em;
}

/* line 15, /Users/cferdinandi/Sites/kraken/src/sass/components/_overrides.scss */
.text-large {
  font-size: 1.1875em;
  line-height: 1.4;
}

@media (min-width: 40em) {
  /* line 15, /Users/cferdinandi/Sites/kraken/src/sass/components/_overrides.scss */
  .text-large {
    font-size: 1.3125em;
  }
}

/**
 * Text colors
 */
/* line 29, /Users/cferdinandi/Sites/kraken/src/sass/components/_overrides.scss */
.text-muted {
  color: var(--graymedium);
}

/**
 * Text alignment
 */
/* line 38, /Users/cferdinandi/Sites/kraken/src/sass/components/_overrides.scss */
.text-center {
  text-align: center;
}

/* line 42, /Users/cferdinandi/Sites/kraken/src/sass/components/_overrides.scss */
.text-right {
  text-align: right;
}

/* line 46, /Users/cferdinandi/Sites/kraken/src/sass/components/_overrides.scss */
.text-left {
  text-align: left;
}

@media (min-width: 40em) {
  /* line 51, /Users/cferdinandi/Sites/kraken/src/sass/components/_overrides.scss */
  .text-right-medium {
    text-align: right;
  }
}

/**
 * Floats
 */
/* line 61, /Users/cferdinandi/Sites/kraken/src/sass/components/_overrides.scss */
.float-left {
  float: left;
}

/* line 65, /Users/cferdinandi/Sites/kraken/src/sass/components/_overrides.scss */
.float-center {
  float: none;
  margin-left: auto;
  margin-right: auto;
}

/* line 71, /Users/cferdinandi/Sites/kraken/src/sass/components/_overrides.scss */
.float-right {
  float: right;
}

/**
 * Margins
 */
/* line 80, /Users/cferdinandi/Sites/kraken/src/sass/components/_overrides.scss */
.no-margin-top {
  margin-top: 0;
}

/* line 84, /Users/cferdinandi/Sites/kraken/src/sass/components/_overrides.scss */
.no-margin-bottom {
  margin-bottom: 0;
}

/* line 88, /Users/cferdinandi/Sites/kraken/src/sass/components/_overrides.scss */
.margin-top {
  margin-top: 1.5625em;
}

.margin-top-large {
  margin-top: 2em;
}

.margin-top-medium {
  margin-top: 1em;
}

.margin-right-small {
  margin-right: 0.5em;
}

.margin-right-medium {
  margin-right: 1em;
}

/* line 92, /Users/cferdinandi/Sites/kraken/src/sass/components/_overrides.scss */
.margin-bottom {
  margin-bottom: 1.5625em;
}

/* line 96, /Users/cferdinandi/Sites/kraken/src/sass/components/_overrides.scss */
.margin-bottom-small {
  margin-bottom: 0.5em;
}

.margin-bottom-medium {
  margin-bottom: 1em;
}

/* line 100, /Users/cferdinandi/Sites/kraken/src/sass/components/_overrides.scss */
.margin-bottom-large {
  margin-bottom: 2em;
}

/**
 * Padding
 */
/* line 109, /Users/cferdinandi/Sites/kraken/src/sass/components/_overrides.scss */
.no-padding-top {
  padding-top: 0;
}

/* line 113, /Users/cferdinandi/Sites/kraken/src/sass/components/_overrides.scss */
.no-padding-bottom {
  padding-bottom: 0;
}

/* line 117, /Users/cferdinandi/Sites/kraken/src/sass/components/_overrides.scss */
.padding-top {
  padding-top: 1.5625em;
}

/* line 121, /Users/cferdinandi/Sites/kraken/src/sass/components/_overrides.scss */
.padding-top-small {
  padding-top: 0.5em;
}

/* line 125, /Users/cferdinandi/Sites/kraken/src/sass/components/_overrides.scss */
.padding-top-large {
  padding-top: 2em;
}

/* line 129, /Users/cferdinandi/Sites/kraken/src/sass/components/_overrides.scss */
.padding-bottom {
  padding-bottom: 1.5625em;
}

/* line 133, /Users/cferdinandi/Sites/kraken/src/sass/components/_overrides.scss */
.padding-bottom-small {
  padding-bottom: 0.5em;
}

/* line 137, /Users/cferdinandi/Sites/kraken/src/sass/components/_overrides.scss */
.padding-bottom-large {
  padding-bottom: 2em;
}

/**
 * Visibility
 */
/**
 * Visually hide an element, but leave it available for screen readers
 * @link https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css
 * @link http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */
/* line 151, /Users/cferdinandi/Sites/kraken/src/sass/components/_overrides.scss */
.screen-reader, .svg .icon-fallback-text {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/**
 * Extends the .screen-reader class to allow the element to be focusable when navigated to via the keyboard
 * @link https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css
 * @link https://www.drupal.org/node/897638
 */
/* line 168, /Users/cferdinandi/Sites/kraken/src/sass/components/_overrides.scss */
.screen-reader-focusable:active,
.screen-reader-focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: normal;
  width: auto;
}

/**
 * @workaround
 * @affected IE 8/9/10
 * @link http://juicystudio.com/article/screen-readers-display-none.php
 */
/* line 184, /Users/cferdinandi/Sites/kraken/src/sass/components/_overrides.scss */
[hidden], .hidden, template {
  display: none !important;
  visibility: hidden !important;
}

/**
 * Contain floats
 * The space content is one way to avoid an Opera bug when the `contenteditable` attribute is included anywhere else in the document.
 * @link https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css
 */
/* line 196, /Users/cferdinandi/Sites/kraken/src/sass/components/_overrides.scss */
.clearfix:before, .container:before,
.row:before,
.clearfix:after,
.container:after,
.row:after {
  display: table;
  content: " ";
}

/* line 202, /Users/cferdinandi/Sites/kraken/src/sass/components/_overrides.scss */
.clearfix:after, .container:after,
.row:after {
  clear: both;
}

/**
 * @section Print
 * Styling for printed content. Adapted from HTML5BP.
 * @link http://html5boilerplate.com
 */
@media print {
  /**
   * Universal selector.
   * Reset all content to transparent background, black color, and remove box and text shadows.
   */
  /* line 13, /Users/cferdinandi/Sites/kraken/src/sass/components/_print.scss */
  * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  /**
   * Specifies page margin
   */
  @page {
    margin: 0.5cm;
  }
  /**
   * Underline all links
   */
  /* line 30, /Users/cferdinandi/Sites/kraken/src/sass/components/_print.scss */
  a,
  a:visited {
    text-decoration: underline;
  }
  /**
   * Show URL after links
   */
  /* line 38, /Users/cferdinandi/Sites/kraken/src/sass/components/_print.scss */
  a[href]:after {
    content: " (" attr(href) ")";
  }
  /**
   * Don't show URL for internal links
   */
  /* line 45, /Users/cferdinandi/Sites/kraken/src/sass/components/_print.scss */
a[href^="#"]:after {
    content: "";
}
  /**
   * Specifies the minimum number of lines to print at the top and bottom of a page.
   */
  /* line 52, /Users/cferdinandi/Sites/kraken/src/sass/components/_print.scss */
p,
  h1, h2, h3 {
    orphans: 3;
    widows: 3;
}
  /**
   * Avoid inserting a page break after headers
   */
  /* line 61, /Users/cferdinandi/Sites/kraken/src/sass/components/_print.scss */
h1, h2, h3 {
    page-break-after: avoid;
}
  /**
   * Change border color on blockquotes and preformatted text.
   * Avoid page breaks inside the content
   */
  /* line 69, /Users/cferdinandi/Sites/kraken/src/sass/components/_print.scss */
pre,
  blockquote {
    border-color: var(--graymedium);
    page-break-inside: avoid;
}
  /**
   * Displayed as a table header row group
   */
  /* line 78, /Users/cferdinandi/Sites/kraken/src/sass/components/_print.scss */
thead {
    display: table-header-group;
}
  /**
   * Avoid inserting a page break inside table rows and images
   */
  /* line 85, /Users/cferdinandi/Sites/kraken/src/sass/components/_print.scss */
tr,
  img {
    page-break-inside: avoid;
}
}


/* Custom.css */

/**
 * Grid Highlighting
 */

.grid-highlight {
    background-color: #f7f7f7;
    border: 1px solid var(--graylighter);
    border-radius: 0.0725em;
    margin-bottom: 1.5625em;
    padding: 0.9375em;
}


/**
 * Prism
 * Code syntax highlighting by Lea Verou.
 * http://prismjs.com/
 */

@media screen {

    .token.comment,
  .token.prolog,
  .token.doctype,
  .token.cdata {
        color:var(--graydark);
    }

    .token.punctuation {
        color: var(--graymedium);
    }

    .token.property,
  .token.tag,
  .token.boolean,
  .token.number,
  .token.constant,
  .token.symbol {
        color: var(--secondary-500);
    }

    .token.selector,
  .token.attr-name,
  .token.string,
  .token.builtin {
        color: var(--green);
    }

    .token.operator,
  .token.entity,
  .token.url,
  .language-css .token.string,
  .style .token.string,
  .token.variable {
        color: #a67f59;
    }

    .token.atrule,
  .token.attr-value,
  .token.keyword {
        color: var(--blue);
    }

    .token.regex,
  .token.important {
        color: var(--orange);
    }

    .token.important {
        font-weight: 700;
    }

    .token.entity {
        cursor: help;
    }
}

/* End of boilerplate, start of custom styles */
/* Header */
#cont-header2 {
  border-top: var(--primary-300) 3px solid;
}

#cont-header2 .container {
  padding-left: 0.2%;
  padding-right: 0.2%;
}

a.logo,
a.logo:hover,
a.logo:focus,
a.logo:active {
  display: inline-grid;
  background-image: none;
  background-color: transparent;
  text-decoration: none;
  padding-bottom: 0;
}

@media (min-width:60em) {
  .nav {
    justify-self: end;
  }
  .nav li {
    margin-top: 0;
  }
  .nav li:last-child {
    margin-right: 0;
  }
}

/* https://dev.to/hack4impact/building-a-sexy-mobile-ready-navbar-in-any-web-framework-3lm2 */
.nav-new {
  display: flex;
  margin: 0.75em 0;
  align-items: center;
}

.nav-new .logo,
.nav-new .logo:hover,
.nav-new .logo:focus,
.nav-new .logo:active {
  display: inline-grid; /* hack to remove whitespace below the logo, so weird */
  margin-right: auto;
  padding-bottom: 0;
  background-image: none;
}

.dropdown-link-container > a {
  margin-left: 20px; /* space out all our links */
}

.mobile-dropdown-toggle {
  display: none; /* hide our hamburger button until we're on mobile */
}

@media (max-width: 50em) {
  /* make sure our logo and dropdown buttons actually appear on top of our dropdown */
  .logo, .mobile-dropdown-toggle {
    z-index: 1;
  }

  /* CSS only hamburged / X */
  .mobile-dropdown-toggle {
    display: initial; /* override that display: none attribute from before */
    height: 24px;
    width: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    padding: 0;
    z-index: 1;
    background-color: transparent;
    border: none;
    cursor: pointer;
  }

  .mobile-dropdown-toggle:focus {
    outline: 2px dashed var(--primary-500);
    background-color: var(--primary-100);
  }
  .dropdown-opened .mobile-dropdown-toggle:focus {
    background: transparent;
  }

  .mobile-dropdown-toggle > span {
    border-bottom: 4px solid var(--primary-700);
    transition: transform .2s,opacity .2s;
  }

  .hamburger-menu-stripe-top {
    transform-origin: top right;
  }

  .hamburger-menu-stripe-bottom {
    transform-origin: bottom right;
  }

  /* Turn the hamburger into an X */
  .dropdown-opened .hamburger-menu-stripe-top {
    transform: rotate(-45deg);
  }
  .dropdown-opened .hamburger-menu-stripe-middle {
    transform: scaleX(0);
  }
  .dropdown-opened .hamburger-menu-stripe-bottom {
    transform: rotate(45deg);
  }

  /* Give fixed position the header nav so on scroll it remains visible */
  .dropdown-opened {
    transition: background-color .3s;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    /* display: flex;
    align-items: center; */
    width: 90%; /* same as .container */
    margin-left: auto; /* same as .container */
    margin-right: auto; /* same as .container */
  }

  .dropdown-link-container {
    z-index: 0; /* we're gonna avoid using -1 here, since it could position our navbar below other content on the page as well! */
    
    /* our initial state */
    opacity: 0; /* fade out */
    transform: translateY(-100%); /* move out of view */
    transition: transform 0.2s, opacity 0.2s; /* transition these smoothly */
  }
  /* JS handles the click event, toggle classList to add/remove dropdown-opened class */
  .nav-new.dropdown-opened > .dropdown-link-container {
    opacity: 1; /* fade in */
    transform: translateY(0); /* move into view */
  }

  .dropdown-link-container {
    /* first, make our dropdown cover the screen */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    /* fix nav height on mobile safari, where 100vh is a little off */
    height: -webkit-fill-available;

    /* then, arrange our links top to bottom */
    display: flex;
    flex-direction: column;
    /* center links vertically, push to the right horizontally.
       this means our links will line up with the rightward hamburger button */
    justify-content: center;
    align-items: flex-end;

    text-align: right;

    /* add margins and padding to taste */
    margin: 0;
    padding-left: 5vw;
    padding-right: 5vw;

    background: rgba(204,229,232,.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .dropdown-link-container > a {
    /* style the links, also for hover, focus, active */
    margin-bottom: 2em;
    padding-bottom: 0.1em;
    color: var(--primary-700);
    font-size: 1.75em;
    font-weight: 700;
  }
}

/* MSI has different header, masthead and footer */
#msi-body #cont-header2 .nav-wrap {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto;
  gap: 0 0.4em;
  margin: 1em 0;
  padding: 0;
  font-size: 1em;
  align-items: center;
  justify-items: start;
}

#msi-body #cont-header2 .nav-wrap div {
  margin-left: .5em;
  font-size: 1.2em;
}

#msi-header-productname-long {
  display: none;
}

@media (min-width:40em) {
  #msi-header-productname-short {
    display: none;
  }
  #msi-header-productname-long {
    display: block;
  }
}


/* Masthead */
#cont-masthead { 
  background-color: var(--primary-700); 
  color: var(--white);
  box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);
}

#cont-masthead .container {
  padding-left: 0.2%;
  padding-right: 0.2%;
}

#cont-masthead h1 {
  padding-top: 1rem;
  margin-bottom: 0.75rem;
}

@media (min-width: 40em) {
    #cont-masthead h1 {
    padding-top: 1rem;
    margin-bottom: 0.75rem;
  }
}

#cont-masthead ul, #cont-masthead p {
  margin-bottom: 0.75rem;
}

#cont-masthead a, 
#cont-masthead a:visited {
  color: var(--white);
}
#cont-masthead a:hover,
#cont-masthead a:active {
  background-image: linear-gradient(to right,var(--white),var(--white),var(--white));
  background-size: 100% 1px;
}
#cont-masthead a:focus {
  outline: 1px dashed var(--white);
  background-image: none;
  padding-bottom: 0;
}
#cont-masthead a:active {
  background-color: var(--primary-900);
  outline: none;
}


/* Main */


/* Aside */
.aside-box {
  margin-bottom: 1.5em; 
  padding-right: 0.5em; 
  padding-bottom: 0.01em;
}

@media (min-width: 40em) {
  .aside-box {
    padding-left: 1em; 
    border-left: 1px solid var(--graylighter);
  }  
}

.aside-box h2 {
  padding-top: 0.5em; margin-bottom: 0.5em;
}

.aside-box .list-unstyled.spacious li {
  margin-top: 0.75em;
}

.aside-box p {
  margin-bottom: 0.5em;
}


/* Footer */
#cont-footer { 
  background-color: var(--primary-500); /* var(--primary-700) */
}

#cont-footer .container {
  padding-left: 0.2%;
  padding-right: 0.2%;
}

#cont-footer .grid-third {
  font-size: 0.875em;
}

/* Homepage */
.homepage-cdns {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto auto;
  grid-template-areas:
    'prominent'
    'directory'
  ;
  column-gap: 1em;
  row-gap: 2em;
  align-items: center;
  margin-top: 1em;
  margin-bottom: 2em;
}

.homepage-cdns > div:nth-child(1) {
  grid-area: prominent;  
}

.homepage-cdns > div:nth-child(1) > div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  grid-column-gap: 2em;
  grid-row-gap: 1.5em;
  align-items: center;
  justify-content: center;
  margin-top: 0em;
  margin-bottom: 0em;
}

.homepage-cdn-prominent {
  display: block;
  justify-self: initial;
  Xwidth: -moz-available; /* fixed displaying SVG images in FF with justify-self set to start ... leaving this here, may be helpful in future  */
}

.homepage-cdn-prominent img {
  width: 100%;
  max-width: 200px;
}

.homepage-cdns > div:nth-child(2) {
  grid-area: directory;
}

.homepage-cdns > div:nth-child(2) > div:first-child {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  align-items: start;
  justify-content: start;
  margin-top: 0em;
  margin-bottom: .75em;
}

.homepage-cdns > div:nth-child(2) > div:nth-child(2) {
  margin-bottom: 0em;
}

.homepage-cdns > div:nth-child(2) > div:first-child > ul {
  margin-bottom: 0.5em;
}

@media (min-width: 40em) {
  .homepage-cdns {
    grid-template-columns: 40% 60%;
    grid-template-rows: auto;
    grid-template-areas:
      'prominent directory';
    row-gap: 2em;
  }

  .homepage-cdns > div:nth-child(1) > div {
    grid-template-columns: repeat(1, 1fr);
    grid-column-gap: 1em;
    grid-row-gap: 1em;
  }

  .homepage-cdn-prominent img {
    max-width: 160px;
  }
}

@media (min-width: 60em) {
  .homepage-cdns {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      'prominent directory';
    column-gap: 2em;
    margin-bottom: 3em;
  }

  .homepage-cdns > div:nth-child(1) > div {
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 2em;
    grid-row-gap: 2em;
  }

  .homepage-cdns > div:nth-child(2) > div:first-child {
    grid-column-gap: 0em;
  }

  .homepage-cdns > div:nth-child(2) > div:first-child > ul {
    margin-bottom: 0;
  }

  .homepage-cdn-prominent img {
    max-width: 200px;
  }
}

/* The .cdn-list seems legacy and not used currently */
.cdn-list.large {
  width:44%;
  height:150px;
  padding: 0.5em 0;
  margin: 0 0.5em 1em 0.5em;
  text-align: center;
  background-color: #cccccc;
}

.cdn-list.large img {
  width: 100%;
  max-width: 260px;
  transform: none;
}

.cdn-list.large p {
  display:none;
  margin: 0 auto
}

@media (min-width: 40em) {
  .cdn-list.large {
    border-bottom: 1px solid var(--graylighter);
  }
  .cdn-list.large p {
    display: block;
    width: 100%;
    max-width: 260px;
    /*margin-left: 0;*/
    margin-bottom: 1em;
    text-align: center;
    background-color: #e5f9fd; color:var(--primary-700); padding:0.25em; opacity:0.8;
  }
}
@media (min-width: 60em) {
  .cdn-list.large img, .cdn-list.large p { max-width: 300px; }
}


.cdn-list > li {
  display: block;
  float: left;
  width: 44%;
  height: 110px;
  text-align: center;
  /*background-color: #ffcccc;*/
}

.cdn-list img {
  margin: 0;
  position: relative;
  top: 50%;
  transform: perspective(1px) translateY(-50%);
}

@media (min-width: 40em) {
  .cdn-list > li {
    width: 29%;
  }
}

.prominent-home-box {
  padding: 0;
}

.prominent-home-tagline {
  display: none;
}
ul.cdn-list.prominent {
  margin-bottom: 0.5em;
}
.cdn-list.prominent > li, .cdn-list.prominent a {
  height: 80px;
}

.cdn-list.prominent a {
  display: block;
}

.cdn-list.prominent p {
  display: none;
  margin: 0 auto
}

.prominent-home-box hr.dotted {
  display: none;
}

.home-prom-table td { 
  width: 50%; 
  height: 80px; 
  padding: 0em 1.5em 2em 0.75em; 
  vertical-align: middle; 
  border-top:none;
}

.home-prom-table td:first-child { 
  padding-left: 0
}

.home-prom-table td img { 
  width: 200px;
}

.home-cdn-dir ul {
  float:left; 
  width:33%
}

.compare-home-box {
  padding: 0 0.75em;
  background-color: var(--primary-100); 
  color: var(--primary-700);
}

.compare-home-box form {
  display: inline-block; 
  margin: 0
}

.compare-home-box form select {
  float: left; 
  width: 48%; 
  height: 34px;
  margin: 0 2% 0 0;
  background-color: var(--white);
}


@media (min-width: 60em) {
  .prominent-home-box {
    padding: 0 1em 1em 1em;
    border: 1px dotted var(--graylighter);
  }
  .prominent-home-tagline {
    color: #a2aaab;
    font-size: 1em;
    display: inline-block;
    position: relative;
    top: -12px;
    background-color: var(--white);
    padding: 0 0.5em;
  }
  ul.cdn-list.prominent {
    margin-bottom: 1.5625em;
  }
  .cdn-list.prominent li {
    width: 44%;
  }
  .cdn-list.prominent > li, .cdn-list.prominent a {
    height: 120px;
  }
  .cdn-list.prominent img {
    width: 100%;
    max-width: 260px;
  }
  .cdn-list.prominent p {
    display: block;
    width: 100%;
    max-width: 260px;
    /*margin-left: 0;*/
    /*margin-bottom: 1em;*/
    text-align: center;
    background-color: #e5f9fd; color:var(--primary-700); padding:0.25em; opacity:0.8;
  }
  .prominent-home-box hr.dotted {
    display: block;
  }
  .home-cdn-dir ul {
    font-size: 110%
  }
  .compare-home-box form {
    margin: 35px 0
  }
  .compare-home-box form select {
    height: 40px;
    width: 36%;
    font-size: 110%
  }
  .compare-home-box form input[type="submit"] {
    font-size: 110%
  }
}
@media (min-width: 60em) {
  .cdn-list.prominent img, .cdn-list.prominent p { max-width: 300px; }
}

@media (max-width: 60em) {
  .compare-home-box form input[type="submit"] {
    margin: 1em 0
  }
}

.section-promo-highlight {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto auto auto;
  row-gap: .75em;
  align-content: start;
  margin-bottom: 1.5em;
}

@media (min-width: 60em) {
  .section-promo-highlight {
    margin-bottom: 0;
  }
}

.section-promo-highlight > a:nth-child(1) {
  width: max-content;
  padding: 0.2em 0.4em;
  background-color: var(--primary-100);
  border-radius: 2px;
  color: var(--primary-700);
}

.section-promo-highlight > a:nth-child(1):hover {
  background-image: linear-gradient(to right, var(--primary-700), var(--primary-700), var(--primary-700));
}

.section-promo-highlight > h2 {
  margin: 0;
  padding: 0;
}



/* Helpers */

.bordered {
  border: 1px solid var(--graylighter);
}

.border-bottom {
  border-bottom: 1px solid var(--graylighter);
}

.inline-block {
  display: inline-block;
}


/* Custom */

hr.dotted {
  border-top: 1px dotted var(--graylighter);
  margin-top: 2.6em;
  margin-bottom: 1.6em;
}

.pub-date {
  display: inline-block;
  margin-bottom:0.75em;
  padding: 0.3em 0.4em;
  background-color: var(--primary-100);
  color: var(--primary-900);
  border-radius: 2px;
}

.notice-msg { 
  display: inline-block; 
  margin: 1em 0 1em; 
  padding: 0.78125em;
  color: var(--primary-900);
  padding-left: 2.4em;
  background-color: transparent;
  background-image: url(/static/img/information.svg);
  background-repeat: no-repeat;
  background-position: 0.49em 0.78125em;
  background-size: 24px 24px;
}
.notice-msg svg, .notice-msg img { 
  display: inline-block;
  margin-right: 0.3em;
}

.notice-msg.danger  { 
  background-image: url(/static/img/close-circle-red-400.svg);
  background-color: var(--color-notice-danger-25);
  border-left: 8px solid var(--color-notice-danger-400);
}
.notice-msg.warning { 
  background-image: url(/static/img/alert-warning-400.svg);
  background-color: var(--color-notice-warning-25);
  border-left: 8px solid var(--color-notice-warning-400);
} 
/* .notice-msg.success { 
  background-image: url(/static/img/check-circle-success.svg); 
  background-color:#bdf0c3; 
} */
.notice-msg.info { 
  background-image: url(/static/img/information-400.svg); 
  background-color: var(--color-notice-info-25); 
  border-left: 8px solid var(--color-notice-info-400);
}

.notice-msg .sticky {
  position: sticky;
  top: 1px;
  z-index: 1000;
}

.notice-box {
  margin: 1em 0;
}
.notice-box > div {
  padding: 10px 20px 10px 50px;
  background-position: 13px 10px;
  background-repeat: no-repeat;
  background-size: 25px;
  color: var(--graydarkest);
}
.notice-box > div.info {
  background-image: url(/static/img/information-400.svg);
  background-color: var(--primary-25);
  border-left: 8px solid var(--primary-400);
}
.notice-box > div.warning {
  background-image: url(/static/img/alert-warning-400.svg);
  background-color: var(--tertiary-25);
  border-left: 8px solid var(--tertiary-400);
}
.notice-box > div.danger {
  background-image: url(/static/img/close-circle-400.svg);
  background-color: var(--secondary-25);
  border-left: 8px solid var(--secondary-400);
}

.table-icons-legend {
  display: flex;
  align-items: center;
  margin-bottom: 1em;
  line-height: initial;
}
.table-icons-legend > div {
  display: contents
}
.table-icons-legend svg {
  margin-right: 0;
}
.table-icons-legend span {
  display: inline-block;
  margin-right: 2em;
  margin-left: .25em;
}
@media (max-width: 60em) {
  .table-icons-legend {
    flex-wrap: wrap;
    row-gap: 0.5em;
  }
  .table-icons-legend > div {
    display: inline-grid;
  }
}


.icon-help { 
  display:inline-block; 
  margin-right: 0; 
  opacity: 0.5; 
}

.icon-in-table-cell { 
  max-width: unset;
  margin-right: 0.3em;
  vertical-align: -20%;
}

.statusimg-in-table-cell { /* stroke and fill are set in the SVG */
  position: relative;
  right: 2px;
  width: 24px;
  height: 24px;
  /* margin-right: 0.3em; */
  vertical-align: -20%; 
}

.icon-in-table-cell-new { 
  display: block;
  position: relative;
  top: 0px;
}
.icon-in-table-cell.right {
  vertical-align: middle
}
.icon-in-table-heading { 
  position: relative; 
  top: 3px;
  left: 3px;
  opacity: 0.5
}

@media (max-width: 40em) {
  .table-responsive td .icon-in-table-cell { /* TODO: remove this style? */
    float:none;
  }
}

table.second-col-icon th:nth-child(2),
table.second-col-icon td:nth-child(2) {
  min-width: calc(24px + 1em);
}

img.img-no-max-width {
  max-width: none;
}

.cdn-page-table td:first-child {
  width: 48%;
}
.cdn-page-table td:nth-child(2) {
  width: 40px;
}
@media (max-width: 40em) {
  .cdn-page-table td:first-child {
    font-weight: 600;
  }
}

@media (max-width: 40em) {
  table.cdns-network td:first-child {
    font-weight: 600;
  }
}

@media (min-width: 40em) {
  table.cdns-network td:first-child {
    width: 20%;
    padding-right: 1em;
  }
  table.cdns-network td:nth-child(2), table.cdns-network td:nth-child(4) {
    padding-right: 0;
    padding-left: 0;
  }
  table.cdns-network td:nth-child(3) {
    padding-right: 2em;
    padding-left: 0.25em;
  }
}

table.cdns-network.geo td {
  padding: 0.5em;
}
table.cdns-network.geo td:first-child {
  width: 24%;
  padding-right: 5%;
}


.table-two-col-5050 th, .table-two-col-5050 td {
  width:50%;
}

@media (max-width: 40em) {
  .table-two-col-5050 th, .table-two-col-5050 td {
    width:initial;
  }
}

.table-three-col-502525 th, .table-three-col-502525 td {
  width:25%;
}
.table-three-col-502525 th:first-child, .table-three-col-502525 td:first-child {
  width:50%;
}

.table-three-col-333333 th, .table-three-col-333333 td {
  width:33%;
}
.table-three-col-333333 th:first-child, .table-three-col-333333 td:first-child {
  width:33%;
}

.tooltip {
  position: relative;
  /*display: inline-block;*/
  cursor: help;
}

.tooltip span {
  visibility: hidden;
  width: calc(100% * 15);
  max-width: 340px;
  margin-left: 10px;
  padding: 0.2em 0.4em;
  background: var(--primary-900);
  color: var(--white);
  position: absolute;
  z-index: 10;
  font-weight: 400
  /*top: 36px;
  left: -310px;*/ 
}
.tooltip span {
  top: 155%;
  right: 105%;
}

.tooltip span.small {
  width:200px;
}

.tooltip.tooltip-position-right span {
  top: 100%;
  left: -5px;
}

.tooltip:hover span {
  visibility: visible;
}

a.external-link:after {
  content: '';
  display: inline-block;
  position: relative;
  top: 2px;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  background-image: url(/static/img/open-in-new.svg);
  background-size: 14px 14px;
}

.twitter-timeline-embed-cdnp {
  width: 100%; 
  max-width: 500px; 
}

@media (max-width: 40em) {
  .image-hide-mobile {
    display: none;
  }
}

.geo-map-bg {
  background-repeat: no-repeat; background-position: right top;
}

.geo-flag-icon {
  display: none;
}

@media (min-width: 60em) {
  .geo-flag-icon {
    display: block;
    float: right;
  }
}

.sortactive { background-color: #ededed; }

[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none;
}

.datatable tbody td {font-size: 88%;}
.datatable thead th {font-size: 88%;}

.toc-container {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto auto;
  grid-template-areas:
    'non-toc'
    'toc';
  row-gap: 20px;
}

.toc-container div:nth-child(1) {
  grid-area: non-toc;
}

.toc {
  grid-area: toc;
  margin-bottom: 1em;
  padding: 1em;
  border: 1px solid var(--graylighter);
}

.toc ul {
  list-style-type: none;
  margin-top: 0.5em;
  margin-bottom: 0;
  margin-left: 0;
}

@media (min-width: 60em) {
  .toc-container {
    grid-template-columns: auto auto;
    grid-template-rows: auto;
    grid-template-areas:
      'non-toc toc';
  }

  .toc {
    margin-left: 2em;
  }
}

@media (min-width: 60em) {
  .geos-more-four {
    height: 300px; 
    background: transparent url(/static/img/world-svgomg.svg) no-repeat center center; 
    background-size: 600px 300px
  }
}

.section-em-box {
  display: inline-block;
  margin-bottom: 2em; 
  padding: 0 2em 0.5em 1em; 
  background-color: var(--primary-100); 
  color: var(--primary-700);
}

.section-em-box li::before {
   content: '\2605';
}

.section-em-box a, .section-em-box a:visited {
  padding-left: 0.25em
}

.aside-box.compare {
  display: none;
}

@media (min-width: 60em) {
  .aside-box.compare {
    display: block;
    padding-bottom: 1em;
    padding-left: 1em;
    background-color: var(--primary-100); 
    color: var(--primary-700);
    border-left: 1px solid var(--primary-100);
  }
}

.cdn-list-prominent-logos {
  max-width: 240px; min-height: 70px
}

label {
  display: inline-block;
  padding-left: 0.3em;
  padding-right: 2em
}

.form-input-text-small {
  width: 100%;
  max-width: 400px;
}

#spinner:not([hidden]) {
  position: absolute;
  top: 0;
  left: 0;
  right: 20px;
  bottom: 0;
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  color: var(--white)
}

#spinner::after {
  content: "";
  width: 20px;
  height: 20px;
  border: 2px solid var(--white);
  border-top: 3px solid var(--secondary-500);
  border-radius: 100%;
  will-change: transform;
  animation: spin 1s infinite linear;
  margin-left: 10px;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

code.simple {
  background-color: var(--graylighter);
  color: inherit;
  margin-right: 0.33em;
  margin-left: 0.33em;
  padding: 0.25em 0.5em;
  word-wrap: break-word;
}

/* Changelog */

.changelog {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: initial;
  grid-row-gap: 1em;
  align-items: start;
  justify-content: left;
  margin-bottom: 1.5em;
}

@media (min-width: 40em) {
  .changelog {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-template-areas: initial;
    grid-column-gap: 0.5em;
    grid-row-gap: 0.5em;
    align-items: start;
    justify-content: left;
    margin-bottom: 1.5em;
  }
}

.changelog h3 {
  padding-top: 0;
}

.changelog ul {
  margin-top: 0.5em;
  margin-bottom: 0;
}

.change-type {
  padding: 0.15em 0.4em;
  border-radius: 3px;
}

.change-type.new {
  background-color: var(--secondary-500);
  color: var(--white);
}

.change-type.improved {
  background-color: var(--primary-500);
  color: var(--white);
}

.change-type.changed {
  background-color: var(--tertiary-200);
  color: var(--tertiary-900);
}

.change-type.removed {
  background-color: var(--red);
  color: var(--white);
}

.change-type.fixed {
  background-color: var(--primary-200);
  color: var(--black);
}

.change-type.security {
  background-color: var(--graydarkest);
  color: var(--white);
}

.tag {
  display: inline-block;
  margin-right: 0.2em;
  padding: 0.0em 0.25em 0.05em;
  background-color: var(--graylighter);
  color: var(--graydark);
  border-radius: 3px;
  font-size: 90%;
}


/* https://codepen.io/mtrythall/pen/XXNGVg */
.stars .star {
  box-sizing: border-box;
  display: inline-block;
  margin-right: 4px;
  height: 24px;
  width: 24px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23bdbdbd' stroke='%23bdbdbd' stroke-width='38' d='M259.216 29.942L330.27 173.92l158.89 23.087L374.185 309.08l27.145 158.23-142.114-74.698-142.112 74.698 27.146-158.23L29.274 197.007l158.89-23.088z' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  font-size: 0;
}
.stars.one > div:nth-of-type(-n + 1),
.stars.two > div:nth-of-type(-n + 2),
.stars.three > div:nth-of-type(-n + 3),
.stars.four > div:nth-of-type(-n + 4),
.stars.five > div:nth-of-type(-n + 5) {
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23ffe066' stroke='%23ffd83f' stroke-width='38' d='M259.216 29.942L330.27 173.92l158.89 23.087L374.185 309.08l27.145 158.23-142.114-74.698-142.112 74.698 27.146-158.23L29.274 197.007l158.89-23.088z' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* PrismJS 1.22.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+bash+http */
/**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */

code[class*="language-"],
pre[class*="language-"] {
	color: var(--black);
	background: none;
	text-shadow: 0 1px var(--white);
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	font-size: 1em;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
	text-shadow: none;
	background: #b3d4fc;
}

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
	text-shadow: none;
	background: #b3d4fc;
}

@media print {
	code[class*="language-"],
	pre[class*="language-"] {
		text-shadow: none;
	}
}

/* Code blocks */
pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: var(--graylightest)
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .1em;
	border-radius: .3em;
	white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: var(--graydark);
}

.token.punctuation {
	color: var(--graymedium);
}

.token.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
	color: var(--secondary-500);
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: var(--green);
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
	color: #9a6e3a;
	/* This background color was intended by the author of this theme. */
	/* background: hsla(0, 0%, 100%, .5); */
}

.token.atrule,
.token.attr-value,
.token.keyword {
	color: var(--blue);
}

.token.function,
.token.class-name {
	color: var(--secondary-500);
}

.token.regex,
.token.important,
.token.variable {
	color: var(--orange);
}

.token.important,
.token.bold {
	font-weight: bold;
}
.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}

/* Webmentions */
.webmentions h4 {
	margin-top: 2em;
}

.webmentions a {
	background-image: none;
}

.webmentions a:hover {
  text-decoration: none;
}

.webmentions img {
  border-radius: 50%;
}

.webmentions img {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4), 0 2px 4px hsla(0, 0%, 0%, 0.3);
}

.webmentions img:hover {
  box-shadow: 0 3px 12px rgba(0, 125, 138, 0.4), 0 6px 8px rgba(0, 125, 138, 0.3);
}

.webmention-replies article {
  margin-bottom: 32px;
}

.webmention-replies .webmention__meta {
  margin-bottom: 8px;
}

.webmention-replies img {
  height: 24px;
  width: 24px;
}

.webmention-replies .webmention__meta time {
  display: block;
  margin-top: 8px;
  font-size: 0.9em;
  color: var(--graymedium);
}

@media (min-width: 40em) {
  .webmention-replies .webmention__meta {
    display: grid;
    grid-template-columns: 30px 1fr 200px;
  }
  .webmention-replies .webmention__meta time {
    justify-self: end;
  }
}

.share-well {
	display: grid;
  grid-template-columns: 24px 1fr;
  gap: 1em;
  margin: 3em 0 2em;
  padding: 1.5em 1em;
  background-color: var(--graylighter);
  font-size: 0.9em;
  align-items: center;
}

.share-well svg {
	margin: auto;
}

.share-well p {
  margin: 0;
}

/* Tools */
.tool-form-loading {
  height: 25px;
}



/* Traffic Share */
#traffic-share-main {
  max-width: 60em;
}

#traffic-share-brand-logo {
  height: 36px;
  margin-top: 0.3em;
}

.traffic-share-select {
  display: inline-block;
  width: auto;
  margin-right: 1em;
  margin-bottom: 0.5em;
  padding-right: 0.4em;
  background-color: var(--white);
}

#traffic-share-summary-intro {
  margin-top: 1em;
}


#traffic-share-main table a,
#traffic-share-main table a:visited {
  color: var(--black)
}

#traffic-share-main table th {
  text-align: right;
}
@media (min-width: 30em) {
  #traffic-share-main table th {
    padding-right: 25px;
  }
}

#traffic-share-main table td:not(:first-child) {
  width: 15%;
  text-align: right;
}
@media (min-width: 30em) {
  #traffic-share-main table td:not(:first-child) {
    width: 15%;
  }
}

#traffic-share-main table#table-window-summary td:not(:first-child) {
  width: 20%;
}

#traffic-share-main table td:not(:first-child) div {
  display: inline-block;
}

#traffic-share-main table td:not(:first-child) div.delta {
  display: inline-block;
  width: 15px;
  /* display: block;
  width: auto; */
}
@media (min-width: 30em) {
  #traffic-share-main table td:not(:first-child) div.delta {
    display: inline-block;
    width: 15px;
  }
}

#traffic-share-main table .tooltip {
  display: grid;
}

#traffic-share-main table th .tooltip {
  justify-content: end;
}

#traffic-share-main table td .tooltip {
  top: 3px;
}

#traffic-share-main table th .tooltip span {
  top: 120%;
  width: fit-content;
  left: initial;
  right: 0px;
  margin-left: 0;
  max-width: 200px;
}

#traffic-share-main table td .tooltip span {
  top: 130%;
  left: -8px;
  width: max-content;
  max-width: 320px;
  margin-left: 0;
}


.triangle {
  display: inline-block;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  opacity: 0.8;
}

.triangle-up {
  width: 0;
  height: 0;
  border-bottom: 8px solid var(--green);
}

.triangle-down {
  width: 0;
  height: 0;
  border-top: 8px solid var(--red);
}

#charts-container {
  margin-top: 2.4em;
}

.charts-section {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 50px auto auto;
  grid-template-areas:
    'heading'
    'main-domain'
    '_static';
  column-gap: 20px;
  row-gap: 15px;
  align-items: center;
  margin-top: 1.6em;
}

@media (min-width: 60em) {
  .charts-section {
    grid-template-columns: 50% 50%;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      'heading heading'
      'main-domain _static';
    row-gap: 20px;
  }  
}

.charts-section > h2 {
  grid-area: heading;
  margin: 0;
  padding: 0;
}

.chart-container-main-domain {
  grid-area: main-domain;
}

.chart-container-static {
  grid-area: _static;
}

.charts-section > div > h3 {
  margin: 0;
  padding: 0;
}

.chart {
  margin-top: 1em;
  margin-bottom: 1.5em;
  width: 100%;
  /* height: calc(90vw / 1.77) */
  height: 200px;
}

.chart.scatter-chart {
  /* height: calc(90vw / 1.77) */
  height: auto
}

@media (min-width: 30em) {
  .chart {
    height: 240px;
  }
}

@media (min-width: 40em) {
  .chart {
    /* height: calc(80vw / 1.77) */
    height: 320px;
  }

  /* .chart.scatter-chart {
    height: calc(60vw / 1.77) 
  }*/
}

@media (min-width: 60em) {
  .chart {
    /* height: calc(40vw / 1.77) */
    height: 260px;
  }
  .msi-charts-section .chart {
    height: 360px;
  }
  /*.chart.scatter-chart {
     height: calc(32vw / 1.77) 
  }*/
}



.row-muted,
.row-muted a,
.row-muted a:visited {
  color: var(--graymedium);
}
.row-muted a:hover {
  background-image: linear-gradient(to right,#9e9e9e,#9e9e9e,#9e9e9e);
}
.row-muted .triangle {
  border-bottom-color: var(--graymedium);
  border-top-color: var(--graymedium);
}

#lgc-tables .table-lgcts-per-cdn td:first-child {
  min-width: 100px;
}

#lgc-tables .table-lgcts-per-cdn td:not(:first-child) {
  width: calc(90%/4);
  max-width: 200px;
  min-width: 150px;
  word-break: break-word;
}

.table-lgcts-per-cdn td:nth-child(n+3) span {
  display: block;
}

#ts-tables .table-lgcts-per-cdn td:first-child {
  min-width: 100px;
}

#ts-tables .table-lgcts-per-cdn th:nth-child(n+2),
#ts-tables .table-lgcts-per-cdn td:nth-child(n+2) {
  width: 20%;
  min-width: 150px;
  text-align: left;
}

#ts-tables .table-lgcts-per-cdn th:nth-child(n+4),
#ts-tables .table-lgcts-per-cdn td:nth-child(n+4) {
  min-width: 120px;
  text-align: right;
}

@media (max-width: 60em) {
  .table-lgcts-per-cdn td:nth-child(n+3) span {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.table-lgcts-per-cdn td:first-child div {
  display: inline-block;
}
.table-lgcts-per-cdn td:first-child div.delta {
  display: inline-block;
  width: 18px;
}

#toggle-highlights-container {
  float: right;
}
@media (max-width: 40em) {
  #toggle-highlights-container {
    float: none;
    margin-bottom: 1em;
  }
}

.msi-ds-listitem-in-row {
  text-decoration: underline;
  cursor: pointer;
}

#msi-list-items table td:first-child {
  width: 60px;
  color: var(--graymedium);
}

#msi-list-items table td:last-child {
  width: 40px;
  min-width: 40px;
  text-align: right;
}

/* #msi-list-items table td:nth-child(2) a {
  display: block;
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
} */

#msi-list-items .msi-search {
  display: inline-block;
  max-width: 300px;
  margin-right: 1em;
}

.list-inline .active {
  font-weight: bolder;
  background-color: var(--primary-100);
  padding: 0 0.3em;
  border-radius: 3px;;
}

.ws-table th,
.ws-table td:not(:first-child) {
  text-align: right;
}

/* MSI List item page*/

.table-aggregate-ts {
  border-collapse: separate;
  border-spacing: 0 2px;
}

/* Stats */
#stats-main {
  max-width: 60em;
}

#stats-main table.stats-table td:first-child {
  width: 50%;
}
#stats-main table.stats-table td:not(:first-child) {
  width: 12.5%;
}


.stats-summary-card {
  background-color: #fff;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 10px;
  row-gap: 0px;
  margin-bottom: 1.5625em;
  justify-items: stretch;
}
.stats-summary-card.three {
  grid-template-columns: repeat(3, 1fr);
}

.stats-summary-card > div {
  padding: 0.6em;
  padding-bottom: 0;
  background-color: #eee;
  text-align: center;
}
.stats-summary-card > div.v {
  padding-right: 2px;
  padding-bottom: 0.4em;
  font-size: 1.4em;
  font-weight: 600;
}
.stats-summary-card > div.v > span {
  margin-left: 2px;
  color: var(--graymedium);
  font-weight: 400;
  font-size: 70%;
 }

 .sans-count {
  display: block;
  margin-top: 0.5em;
  padding: 0 4px;
  background-color: var(--graydark);
  color: var(--white);
  border-radius: 3px;
  width: max-content;
 }

/* .msi-pitch #masthead-primary {
  padding-top: 1.5rem;
  margin-bottom: 1.45rem;
} */

#msi-body.msi-pitch .container {
  padding-right: 1em;
  padding-left: 1em;
}

.msi-pitch-cta {
  float: right;
  padding: 0 1em 1em 1em;
  /*border: 1px solid var(--primary-100);*/
  background-color: var(--white);
  margin-left: 3em;
  max-width: 16em;
  border-radius: 3px;
  position: relative;
  top: -3em;
  box-shadow: 9px 9px 12px 0px rgb(204 229 232 / 54%);
}

@media (max-width: 60em) {
  .msi-pitch-cta {
    top: 0;
   }
}

.msi-pitch-cta > h3 {
  font-weight: 600;
}

a.msi-pitch-cta-link {
  display: inline-block;
  margin-top: 1em;
  padding: 0.2em 0.5em;
  border: none;
  background: var(--secondary-500);
  color: white !important;    
}

a.msi-pitch-cta-link:hover,
a.msi-pitch-cta-link:active {
  background-image: none;
  xbackground-image: linear-gradient(to right, var(--secondary-700), var(--secondary-700));
  background-color: var(--secondary-700);
}

.highlighted-marker {
  padding: 0.0em 0em 0em 0;
  box-shadow: inset 0 -0.6em #ffe066;
}

.msi-pitch-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 30px;
  row-gap: 0px;
  margin-bottom: 1.5625em;
  justify-items: left;
  background: transparent;
}

.msi-pitch-cards > div {
  width: 100%;
  padding: 0.6em;
  background-color: var(--white);
  color: var(--primary-700);
  font-size: 1.4em;
  box-shadow: 3px 4px 17px 8px rgb(204 229 232 / 54%);
}

.msi-pitch-list-grid {
  display: inline-grid;
  grid-template-columns: 24px 1fr;
  column-gap: 12px;
  row-gap: 6px;
  margin-top: 1em;
}

.msi-pitch-cards .msi-pitch-list-grid {
  font-size: 0.8em;
}

/* .msi-pitch-cards > div > div {
  display: inline-grid;
  grid-template-columns: 24px 1fr;
  column-gap: 12px;
  row-gap: 6px;
  margin-top: 1em;
  font-size: 0.8em;
}  */

/* .msi-pitch-cards > div > ul {
  font-size: 0.8em;
}

.msi-pitch-cards > div > ul > li {
  margin-bottom: 0.3em;
}

.msi-pitch-cards li::before {
  margin-right: 0.25em;
  content: '\2605';
} */

.msi-pitch h2 > img {
  position: relative; 
  top: 4px;
  margin-right: 0.3em; 
}

.msi-pitch-p-highlighted {
  padding: 0.6em 0.8em;
  background-color: var(--primary-100);
  color: var(--primary-700);
  border-radius: 2px;
  border-left: 8px solid var(--color-notice-info-400);
}

.msi-pitch-p-highlighted > div {
  display: block;
  margin: 0.1em 0 0.3em;
  font-weight: 600;
  font-size: 1.1em;
}

/* MSI CDN page */
#msi-customers table td:first-child {
  width: 60px;
  color: var(--graymedium);
}

#msi-customers table td:last-child {
  width: 40px;
  min-width: 40px;
  text-align: right;
}

#msi-customers table td:nth-child(2) {
  width: 20%;
  max-width: fit-content;
}

#msi-customers .msi-search {
  display: inline-block;
  max-width: 300px;
  margin-right: 1em;
}

.msi-visual-cues {
  padding: 0;
  width: 11px;
  height: 11px;
  display: inline-block;
  font-size: small;
  margin-right: 4px;
}

.msi-visual-cues.square {
  background-color: var(--primary-700);
  border-radius: 0%;
}

.msi-visual-cues.circle {
  background-color: var(--primary-300);
  border-radius: 50%;
}

.msi-table-column-filter-select {
  width: fit-content;
  font-weight: initial;
  display: inline-block;
  margin-bottom: 0;
  padding: 0.2em;
}

@media (prefers-reduced-motion: no-preference) {
  :focus {
    transition: outline-offset .15s ease;
    outline-offset: 3px;
  }
}

.geoapify-country-on-map {
  border: 2px solid #cddae2;
}

.geoapify-attribution {
  position: relative; z-index: -3; bottom: 30px;
}

/* CDN News page */
.cdn-news-table td:first-child {
  padding: 0.5em 0;
}

.cdn-news-table td:first-child > img {
  display: none;
}

@media (min-width: 60em) {
  .cdn-news-table td:first-child {
    padding: inherit;
  }
  .cdn-news-table td:first-child > img {
    display: initial;
    vertical-align: text-bottom;
   }
}

.search-field-inline {
  display: inline-block; max-width: 300px; margin-right: 1em;
}

.table-sort:after {
  display:inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
  content:"";
  position: relative;
  top:-10px;
  right:-5px;
}
.table-sort.asc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  content:"";
  position: relative;
  top:4px;
  right:-5px;
}
.table-sort.desc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #fff;
  content:"";
  position: relative;
  top:-4px;
  right:-5px;
}