
@media only screen and (min-width: 600px) {
  html {
    background:#333;
    -webkit-overflow-scrolling : touch;
    -webkit-tap-highlight-color : lighten(#333, 75%);
  }
  html,body {
    max-width: 320px;
    font-family: 'AvenirNextCondensed', Arial, sans-serif;
  }

  body,
  input,
  textarea,
  select {
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    color: #141414;
  }


  a, a:hover {
    color: #00b8ae;
    text-decoration: none;
  }


  @-webkit-viewport {
    width : device-width;
  }

  @-moz-viewport {
    width : device-width;
  }

  @-ms-viewport {
    width : device-width;
  }

  @-o-viewport {
    width : device-width;
  }

  @viewport {
    width : device-width;
  }

  ::-moz-selection {
    background-color: lighten($colorFirst, 65%);
    color: $colorFirst;
    text-shadow: none;
  }

  ::selection {
    background-color: lighten($colorFirst, 65%);
    color: $colorFirst;
    text-shadow: none;
  }

  .overflow-container { overflow-y: scroll; }

  :not(a):focus {
    outline: none;
  }
}
// These placeholder extends exist to make refactoring these elements into proper BEM easier. Currently the styles they are applied on target the element selector directly.
%gem__field {
    display: block;
    border: 0;
    padding: 10px 0;
    margin: 0;
    & + & { margin-top: 24px; }
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
        li {display: block;}
        li + li { margin-top: 8px; }
    }
}

%gem__checkbox {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    z-index: -100;
    & + label {
        &:before {
            display: inline-block;
            width: 16px;
            width: 1rem;
            height: 16px;
            margin-right: 16px;
            padding: 4px;
            background-color: $colorWhite;
            border: 1px solid $colorGrey;
            vertical-align: middle;
            content: "";
        }
    }
    &:checked + label {
        &:before {
            content: "";
            background-clip: content-box;
            background-color: #4f4c54;
        }
    }
    &[type="radio"] + label {
        &:before {
            border-radius: 50%;
        }
    }
}
%gem__label {
  display: block;
  font-size: 18px;
  color: $colorFirst;
}

@import "_s-article-preview";
@import "_s-article";
@import "_s-article-tags";
@import "_s-button";
@import "_s-comments";
@import "_s-language";
@import "_s-polls";
@import "_s-profiles";
@import "_s-search";
@import "_s-section";
@import "_s-service-directory";
@import "_s-surveys";
@import "_s-your-words";
@import "_s-footer";
@import "_s-social-media-buttons";
