/* Demo Custom CSS */
/* .2em !default; */
.hero {
  position: relative;
  width: 100%;
  height: 70vh;
  transition: height 999999s;
  text-align: center;
  min-height: 300px;
  color: #333;
  padding: 1px 0;
  background: #b9dbff url("../images/optimised.svg") no-repeat 50% center scroll;
  background-size: cover; }
  .hero .content {
    position: relative;
    top: 45%;
    transform: translateY(-50%); }
  .hero h1 {
    font-size: 3em;
    line-height: 1;
    padding: 0; }
  .hero p {
    margin: 0; }
  .hero .slogan {
    font-size: 1.3em; }
  .hero .npm {
    max-width: 720px;
    color: #333;
    margin-bottom: 0;
    text-align: center;
    border-radius: 0;
    margin: 1.3em auto 0.3em; }
    .hero .npm.slim, .hero .npm.wide {
      display: none; }
    @media (max-width: 700px) {
      .hero .npm.slim {
        display: block;
        max-width: 500px; } }
    @media (min-width: 700px) {
      .hero .npm.wide {
        display: block; } }
  .hero .links a {
    color: #333;
    box-shadow: 0 2px rgba(0, 0, 0, 0.2);
    transition: all 0.3s; }
  .hero .links a:hover {
    box-shadow: 0 2px #333; }
  .hero .links a:active {
    background: none;
    border-radius: 0; }
@keyframes bounce {
  from {
    bottom: 20px; }
  70% {
    bottom: 10px; }
  to {
    bottom: 20px; } }
.transparent ~ .hero .keepgoing {
  opacity: 1; }

@media all and (max-width: 960px) {
  .hero {
    background-attachment: scroll; } }
.visual {
  text-align: left;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 80px 0 0; }
  .visual .content {
    padding: 10px 20px 0 0; }
  .visual .row {
    margin-top: 0; }
  .visual .tabs label {
    margin-right: 0; }
  .visual .love,
  .visual .name {
    display: block;
    text-align: center;
    padding: 0;
    font-weight: bold; }
  .visual .card {
    overflow: visible; }

@media all and (max-width: 960px) {
  .visual {
    padding: 20px;
    margin: 0 auto; }

  .visual .content {
    margin-bottom: 20px; } }
h1,
h2,
h3,
h4 {
  margin: 0;
  padding: 0;
  line-height: 1; }

html,
body,
main {
  display: block;
  color: #333;
  background: #fff;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: 5; }

main .visual:last-child {
  margin-bottom: 100px; }

.intro {
  padding: 10px;
  max-width: 960px;
  width: 100%;
  margin: 100px auto 500px; }

nav .brand:hover,
nav .brand:active {
  background: none;
  box-shadow: none; }

.flex.demo > * > * {
  display: block;
  padding: 0.3em 0;
  background: #2ecc40;
  text-align: center; }

.flex.demo > *:nth-child(2n) > * {
  background: #7fdbff; }

.test > h2 {
  padding-top: 80px;
  margin-top: -60px; }

.loading,
.loading * {
  transition: all 0s; }

section.row {
  width: 90%;
  max-width: 960px;
  margin: 80px auto; }

section.row aside {
  width: 200px; }

@media all and (max-width: 500px) {
  .icon-help-circled {
    display: none; } }
pre {
  width: 100%; }
  pre code {
    background: none; }

comment-box.visual {
  margin-top: 60px; }

/*# sourceMappingURL=demo.css.map */