body {
  position: relative;
  width: 100%;
  background-color: #F1F1F1;
  font: 100%/12px $font-family;
  font-weight: 300;
  color: #000000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

input:focus {
  outline: 0;
}

a,
a:visited,
a:active,
a:hover,
a:link {
  text-decoration: none;
  color: inherit;
}

.clearfix {
    zoom: 1;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  font: 0/0 a;
  height: 0;
  visibility: hidden;
}

.clickable {
  cursor: pointer;
}

.g-floated, .left {
  float: left;
}

.right {
  float: right;
}

.g-text-overflow {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

.g-uppercase {
  text-transform: uppercase;
}

.g-lowercase {
  text-transform: lowercase;
}

.g-bold {
  font-weight: bold;
}

.hidden {
  display: none;
}

.semibold {
  font-family: $semibold;
}

.light {
  font-family: $light;
}

.flex {
  display: flex;
}