@import "helpers/variables";
@import "helpers/mixins";
@import "helpers/placeholders";

html, body{
  overflow-x: hidden;
}
body{
  font-family: $font-stack-body;
  color: $color-primary;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6{
  font-family: $font-stack-headings;
  font-weight: normal;
}

.vh{
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

strong, b{font-weight: 700;}

.skipLinks{
    ul{
        @extend %list--noStyle;
        @extend %list--inline;
        width: 100%;
        position: absolute;
        top: 0; left: 0;
        a{
            display: block;
            position: absolute;
            top: -500%; left: 0;
            @include standard-transition();
            &:focus{
                top: 0;
                background-color: #5444b9;
                color: #FFF;
                padding: 1em;
                text-decoration: none;
            }
        }
    }
}

main{
  position: relative;
  z-index: 1;
  //padding-top: 5.8em;
}

.centred--thin{
  width: 85%; max-width: 925px;
  margin: 0 auto;
}

.primary-heading{
  font: {
    size: 2.25rem;
    weight: 700;
  }
  color: $color-secondary;
  text-transform: lowercase;
}
.primary-heading--invert{
  color: #FFF;
}

@import "layout/header";
@import "layout/home";
@import "layout/contactForm";

footer{
  .copyright{
    font-size: 1.125em;
    text-align: center;
    border: {
      top: 1px solid #ccc;
      bottom: 1px solid #ccc;
    }
    padding: 2em 0;
  }
  margin-bottom: 5%;
  span{
    display: inline-block;
    width: 0.5em; height: 0.5em;
    background-color: $color-primary;
    border-radius: 100%;
    vertical-align: middle;
    margin: 0 0.5em;
  }
}