/*#############################################################################
# STYLEGUIDE
#############################################################################*/
/*#############################################################################
# FUNCTIONS
#############################################################################*/
/*#############################################################################
# MIXINS
#############################################################################*/
/* Example:
div.logo {
  background: image-url("logo.png") no-repeat;
  @include background-retina("logo2x.png", 100px, 25px);
}
*/
/*#############################################################################
# PLACEHOLDERS
#############################################################################*/
body#intro {
  background: url(/images/styleguide/intro-bg.jpg) no-repeat 50% 50%;
  background-size: cover;
  height: 100vh;
  position: relative;
  text-align: center; }

section.section-wrapper.landing {
  background: #f7f8fb; }
section.section-wrapper.hidden {
  display: none; }

section.intro-block {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

.intro-title {
  margin: 0 0 80px;
  color: #4D4CFC; }
  .intro-title .logo {
    display: inline-block;
    height: 0;
    overflow: hidden; }
    .intro-title .logo.sempli {
      background: url(/images/interface/sempli-logo.svg) no-repeat 50% 50%;
      width: 159px;
      padding-top: 40px;
      margin-bottom: -6px; }
    .intro-title .logo.anvil {
      background: url(/images/styleguide/anvil-logo.svg) no-repeat 50% 50%;
      width: 191px;
      padding-top: 34px; }
  .intro-title .plus-sign {
    display: inline-block;
    position: relative;
    top: -6px;
    margin: 0 10px; }

body#styleguide h1.main-title {
  font-size: 54px; }
body#styleguide h2.section-title {
  font-size: 44px;
  font-weight: 300;
  margin: 0 0 60px; }
body#styleguide h3.subsection-title {
  color: #4D4CFC;
  font-size: 38px;
  font-weight: 900;
  margin-bottom: 60px; }
body#styleguide hr {
  border: none;
  border-bottom: 2px solid #ECECEC;
  margin: 30px 0; }

ul.page-index {
  border-top: 1px solid #dadce2;
  list-style: none;
  margin: 0;
  padding: 0; }
  ul.page-index li a {
    display: grid;
    grid-template-columns: 1fr auto;
    background: url(/images/interface/icons/check-purple.svg) no-repeat 15px 50%;
    border-bottom: 1px solid #dadce2;
    padding: 20px 20px 20px 40px; }
    ul.page-index li a:hover {
      padding: 20px 25px 20px 50px;
      background: #eff0f3 url(/images/interface/icons/check-purple.svg) no-repeat 25px 50%; }
  ul.page-index li.hidden {
    display: none; }