/* Use Carlito font for body text. */
@font-face {
  font-family: "Carlito-Regular";
  src: url(/fonts/Carlito-Regular.ttf) format("truetype");
}
body {
  font-family: "Carlito-Regular";
}
@font-face {
  font-family: "Carlito-Bold";
  src: url(/fonts/Carlito-Bold.ttf) format("truetype");
}
body strong {
  font-family: "Carlito-Bold";
}
@font-face {
  font-family: "Carlito-Italic";
  src: url(/fonts/Carlito-Italic.ttf) format("truetype");
}
body em {
  font-family: "Carlito-Italic";
}
@font-face {
  font-family: "Carlito-BoldItalic";
  src: url(/fonts/Carlito-BoldItalic.ttf) format("truetype");
}
body em strong,
body strong em {
  font-family: "Carlito-BoldItalic";
}

/* Use our 'custom' font for various titles and headers. */
@font-face {
  font-family: "MeetGary";
  src: url(/fonts/CooperBlack-Regular.ttf) format("truetype");
}
div#site-title,
p.xx-large > a,
h1, h2, h3 {
  font-family: "MeetGary", CooperBlack;
  text-transform: none;
  color: #3f46d1;
  line-height: 1em;
}

/* Header and title styling. */
h1 {
  margin-top: 1em;
  margin-left: -3rem;
  margin-right: -3rem;
  font-size: 2.5em; }
h2 {
  font-size: 1.25em;
  margin: 0 0 1em 0 ;
 }
div#site-title {
  font-size: 300%;
}

/* Front page styling */
#body-inner p.xx-large {
  font-size: 300%;
  text-align: center;
  margin: -1em 0 0 0;
}
#body-inner span.img-center {
  width: 100%;
}
#body-inner span.img-center img.inline {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Make text more legible.*/
#body-inner {
  font-size: 1.35em;
}
#body-inner a.btn-default.btn {
  font-size: inherit !important;
  margin: 0 .5em !important;
}
#body-inner p {
  margin: 0 0 1em 0;
  color: #323232 !important;
}

/* Style named anchors differently than links. */
#body-inner a.name {
  color: #323232;
}
#body-inner a.name,
#body-inner a.story {
  font-family: Carlito-Bold;
}

/* Avoid named achors being hidden by breadcrumb bar. */
#body-inner a.name-header-offset,
#body-inner a.story-header-offset {
  width: 0;
  padding-top: 75px;
  margin-top: -75px;
  display: inline-block;
}
#body-inner a.name {
  margin-left: -5px;
}

/* Structural iconography. */
#body-inner div.callout-container {
  clear: right;
  display: inline-block;
  width: 100%;
  display: flex;
  padding-bottom: 1em;
}
#body-inner div.callout-img-container {
  float: left;
  width: 15%;
  height: 100%;
  padding-right: 1em;
}
#body-inner img.callout-img {
  width: 75%;
  margin: 0 auto 0 auto;
}
#body-inner div.callout-content {
  clear: right;
  width: 85%;
}
#body-inner div.callout-content ul {
  display: inline-block;
}
/* Make GaryBear heads slightly bigger. */
#body-inner img.callout-img.gary {
  width: 100%;
}
/* Make lightbulb slightly smaller. */
#body-inner img.callout-img.lightbulb {
  width: 60%;
}
/* Shift red flag down slightly. */
#body-inner img.callout-img.red-flag {
  margin-top: .5em;
}
/* Highlighted callouts */
#body-inner div.callout-container.highlight {
  background-color: Gainsboro;
  padding: 1em;
  border-radius: 1em;
  margin-bottom: 1em;
}
/* Thought bubbles */
#body-inner div.callout-container.thoughts {
  width: 70%;
  margin: auto;
}
#body-inner div.callout-img-container.thoughts {
  width: 30%;
}
#body-inner img.callout-img.thoughts {
  width: 80%;
  margin: 60% 0 0 auto;
}
#body-inner div.callout-content.thoughts {
  position: relative;
  width: 60%;
  margin-bottom: 10%;
  padding: 3em 2em;
  text-align: center;
  background: white;
  border-radius:8em / 5em;
  /* css3 */
  -webkit-border-top-left-radius: 8em 5em;
  -webkit-border-top-right-radius: 8em 5em;
  -webkit-border-bottom-right-radius: 8em 5em;
  -webkit-border-bottom-left-radius: 8em 5em;
  -moz-border-radius: 8em / 5em;
}
/* creates the larger circle */
#body-inner div.callout-content.thoughts:before {
  content: "";
  position: absolute;
  bottom: -0.5em;
  left: 1em;
  width: 2em;
  height: 2em;
  background: white;
  border-radius: 2em;
  /* css3 */
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
}

/* creates the smaller circle */
#body-inner div.callout-content.thoughts:after {
  content: "";
  position: absolute;
  bottom: -1em;
  left: 0.25em;
  width: 1em;
  height: 1em;
  background: white;
  border-radius: 1em;
  /* css3 */
  -webkit-border-radius: 1em;
  -moz-border-radius: 1em;
}

/* Avoid flashes at the bottom of the menu column when mobile browsers collapse the address bar. */
body,
nav#sidebar {
  overscroll-behavior: none;
  transition: height 2s, min-height 2s;
}

/* Sibling buttons */
#body-inner div.siblings,
#body-inner div.children {
  text-align: center;
}
#body-inner a.btn.sibling,
#body-inner a.btn.child {
  margin-bottom: 1em !important;
}

/* Read more links. */
i.fa-angle-double-right {
  -webkit-text-stroke: 1px #3f46d1;
  margin-right: 0.5em;
}
div.go-on-wrapper,
div.go-back-wrapper {
  margin-bottom: 1em;
}

blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote:after {
  color: #ccc;
  content: close-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-left: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  font-size: 110%;
  display: inline;
}

/* Make images responsive (particularly LFO logo, which is BIG!!!) */
.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}

/* Provide language navigation as always-on */

ul.languages {
  width: 100%;
  display: table;
  text-align: center;
  margin: 0;
  background-color: #FFFFFF;
  color: #3f46d1;
}

ul.languages li.per-language {
  display: inline-block;
  float: none;
}

li.per-language a {
  display: block;
  color: #3f46d1;
  text-align: center;
  font-size: x-large;
  padding: 14px 16px;
}

/* Change the link color to #111 (black) on hover */
li.per-language a:hover {
  background-color: #322A38;
  color: #FFFFFF;
}