:root {

  /* Primary color shades */
  --md-primary-fg-color:               #1E64C8;
  /* --md-primary-fg-color--light:        hsla(#{hex2hsl($clr-indigo-400)}, 1); */
  /* --md-primary-fg-color--dark:         hsla(#{hex2hsl($clr-indigo-700)}, 1); */
  /* --md-primary-bg-color:               hsla(0, 0%, 100%, 1); */
  /* --md-primary-bg-color--light:        hsla(0, 0%, 100%, 0.7); */

  /* Accent color shades */
  --md-accent-fg-color:                #FFD200;
  /* --md-accent-fg-color--transparent:   hsla(#{hex2hsl($clr-indigo-a200)}, 0.1); */
  /* --md-accent-bg-color:                hsla(0, 0%, 100%, 1); */
  /* --md-accent-bg-color--light:         hsla(0, 0%, 100%, 0.7); */

  --main-background: #FFFDF7;
  --yellow: #AD9000;
  --dark-yellow: #776100;
  --dark-grey: #444;
  --minor-shadow: 0 2px 8px -2px #000; /* box-shadow */
  --dark-blue: #125182;
  --mid-blue: #1E64C8;
  --light-blue: #8BB1E5;

}

/****
 * Custom styles
 **/
section.tiles { margin-top: 32px; margin-bottom: 48px; }
.tile.tiny { display: inline-block; width: 100%; text-align: left; font-size: 0;}
.tile.tiny .inner { background-color: #EEE; color: var(--main-background); cursor: pointer; transition: .2s; height: 64px; position: relative; }
.tile.tiny .inner:hover { }
.tile.tiny .inner img { height: 100%; display: inline-block; }
.tile.tiny .inner h3 { margin: 0; padding: 0; line-height: 32px; position: absolute; top: 4px; left: 108px; font-family: "arial"; font-size: 24px; letter-spacing: 0px; color: #222; }
.tile.tiny .inner span {position: absolute; left: 108px; top: 32px; font-family: "arial"; font-size: 17px; color: #888; }

a.mybutton { position: relative; display: inline-block; font-size: 21px; color: #FFF; margin: 4px 4px 4px 0; transition: .2s; padding: 8px 16px 8px 64px; border-radius: 6px; }

a.mybutton.blue { background-color: var(--mid-blue); }
a.mybutton.blue:hover { color: #FFF; background-color: var(--dark-blue); }

a.mybutton.yellow { background-color: var(--yellow); }
a.mybutton.yellow:hover { color: #FFF; background-color: var(--dark-yellow); }

a.mybutton::before { position: absolute; height: 36px; width: 36px; content:''; background-size: 100% 100%; top: 6px; left: 16px; }
a.mybutton.examples:before { background-image: url('icon/examples-white2.png'); }
a.mybutton.api:before { background-image: url('icon/api-reference.png'); }
a.mybutton.installation:before { background-image: url('icon/installation.png'); }
a.mybutton.license:before { background-image: url('icon/license.png'); }
/*
.button__slide::after {
  content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 0;
  background: var(--mid-blue); transition: width 0.4s ease; z-index: -1;
}
.button__slide:hover { color: #FFF; }
.button__slide:hover::after { width: 100%; }*/


/****
 * Overwriting styles
 **/
details pre { margin: 4px !important; }

article.md-content__inner iframe { border: none; }
a.md-button { border: 2px solid var(--mid-blue) !important; margin: 0 0 12px 0; }
a.md-button:hover { background-color: var(--mid-blue) !important; }
b.output { margin-left: 24px; font-size: 17px; }
.md-content ol li { line-height: 19px;}
.md-typeset pre { margin: 24px 24px 48px 24px; }
article.md-content__inner li:hover a { color: var(--light-blue) !important; }
article.md-content__inner ul li { margin: 2px 0; padding: 0; }
article.md-content__inner h1 { color: #FFF; font-weight: 600; letter-spacing: 1px; position: relative; }
article.md-content__inner h1::after { content:''; border-top: 1px solid #FFF; display: inline-block; position: absolute; top: 48px; left: 0; right: 0; }

article.md-content__inner h2 { color: var(--light-blue); font-weight: 600; letter-spacing: 1px; }
article.md-content__inner h3 { color: #1E64C8; font-weight: 600; }

/* Center images */
img.center { display: block; margin: auto; max-width: 720px; }
img.marginy { margin-top: 24px; margin-bottom: 24px; }