html {
  box-sizing: border-box;
  font-family: $core-font-standard;
  height: 100%;
}
*, *:before, *:after {
  box-sizing: inherit;
}

[v-cloak], .is-hidden {
  display: none;
}

#root {
  padding-bottom: 67px;
  position: relative;
  min-height: 100%;
}

body {
	background-color: lighten(mc('blue-grey','50'), 5%);
  height: 100%;
}

main {
	background-color: lighten(mc('blue-grey','50'), 5%);
}

a {
	color: mc('indigo', '600');
	text-decoration: none;

	&:hover {
		color: mc('indigo', '700');
		text-decoration: underline;
	}
}

// Container

.has-stickynav {
	padding-top: 50px;
}

.container {
  position: relative;

  @include desktop {
    margin: 0 auto;
    max-width: 960px;

    // Modifiers
    &.is-fluid {
      margin: 0;
      max-width: none;
    }
  }


  @include widescreen {
    max-width: 1200px;
  }
}

.content {
	padding: 20px;
}

// Visibility

.is-hidden {
  display: none !important;
}

.is-hidden-until-scroll {
  max-height: 0;
  overflow: hidden;
  transition: all .6s ease;
}
.is-sticky .is-hidden-until-scroll {
  max-height: 30px;
}

.is-hidden-mobile {
  @include mobile {
    display: none !important;
  }
}

.is-hidden-tablet {
  @include tablet {
    display: none !important;
  }
}

.is-hidden-tablet-only {
  @include tablet-only {
    display: none !important;
  }
}

.is-hidden-touch {
  @include touch {
    display: none !important;
  }
}

.is-hidden-desktop {
  @include desktop {
    display: none !important;
  }
}

.is-hidden-desktop-only {
  @include desktop-only {
    display: none !important;
  }
}

.is-hidden-widescreen {
  @include widescreen {
    display: none !important;
  }
}