.xo.marginless {
  margin: 0em !important;
}

.xo.paddingless {
  padding: 0em !important;
}

.xo.marginfull {
  margin: $mar;
}

.xo.paddingfull {
  padding: $mar;

  &.half {
    padding: ($mar/2) !important;
  }
}

.xo.margin.bottom {
  margin-bottom: $mar;

  &.twofold {
  margin-bottom: ($mar*2);
  }
  &.fourfold {
  margin-bottom: ($mar*4);
  }
  &.eightfold {
  margin-bottom: ($mar*8);
  }
}

.xo.padding.bottom {
  padding-bottom: $mar;

  &.half {
    padding-bottom: ($mar/2) !important;
  }

  &.without {
    padding-bottom: 0em !important;
  }

  &.twofold {
  padding-bottom: ($mar*2);
  }
  &.fourfold {
  padding-bottom: ($mar*4);
  }
  &.eightfold {
  padding-bottom: ($mar*8);
  }
}

.xo.padding.left {
  padding-bottom: $mar;

  &.half {
    padding-bottom: ($mar/2) !important;
  }

  &.without {
    padding-bottom: 0em !important;
  }

  &.twofold {
  padding-bottom: ($mar*2);
  }
  &.fourfold {
  padding-bottom: ($mar*4);
  }
  &.eightfold {
  padding-bottom: ($mar*8);
  }
}

.xo.padding.right {
  padding-bottom: $mar;

  &.half {
    padding-bottom: ($mar/2) !important;
  }

  &.without {
    padding-bottom: 0em !important;
  }

  &.twofold {
  padding-bottom: ($mar*2);
  }
  &.fourfold {
  padding-bottom: ($mar*4);
  }
  &.eightfold {
  padding-bottom: ($mar*8);
  }
}


.xo.padding.top {
  padding-top: $mar;

  &.half {
    padding-top: ($mar/2) !important;
  }

  &.without {
    padding-top: 0em !important;
  }

  &.twofold {
  padding-top: ($mar*2);
  }
  &.fourfold {
  padding-top: ($mar*4);
  }
  &.eightfold {
  padding-top: ($mar*8);
  }
}

.xo.margin.top {
  margin-top: $mar;

  &.half {
    margin-top: ($mar/2) !important;
  }

  &.without {
    margin-top: 0em !important;
  }

  &.twofold {
  margin-top: ($mar*2);
  }
  &.fourfold {
  margin-top: ($mar*4);
  }
  &.fivefold {
  margin-top: ($mar*5);
  }
  &.sixfold {
  margin-top: ($mar*6);
  }
  &.eightfold {
  margin-top: ($mar*8);
  }
}


.xo.lightGrey {
  background-color: $lightGrey;
}

.xo.darkWhite {
  background-color: $darkWhite;
}

.xo.lightBlack {
  background-color: $lightBlack;
}


.xo.text {
  &.smaller {
    font-size: 0.50em;

    &.fairly {
      font-size: 0.70em;
    }

    &.slightly {
      font-size: 0.80em;
    }

    &.barely {
      font-size: 0.90em;
    }
  }

  &.bigger {
    font-size: 1.5em;

    &.slightly {
      font-size: 1.25em;
    }
  }

  &.color {
    color: grey;
  }
}

.float-left {
  float: left
}

ul.no-bullets {
  list-style-type: none !important;
}

.pointer:hover {
  cursor: hand;
}

.xo.video {
  position: relative;
  display: block;
  vertical-align: middle;
  max-width: 100%;
  background-color: transparent;
  padding: $mar;

  &.mini {
  width: 35px;
  height: auto;
  font-size: 11px;
  }
  &.tiny {
  width: 80px;
  height: auto;
  font-size: 12px;
  }
  &.small {
  width: 150px;
  height: auto;
  font-size: 13px;
  }
  &.medium {
  width: 300px;
  height: auto;
  font-size: 14px;
  }
  &.large {
  width: 450px;
  height: auto;
  font-size: 14px;
  }
  &.big {
  width: 600px;
  height: auto;
  font-size: 14px;
  }
  &.huge {
  width: 800px;
  height: auto;
  font-size: 14px;
  }
  &.massive {
  width: 960px;
  height: auto;
  font-size: 14px;
  }
  &.floated {
  float: left;
  }
  &.floated.right {
  float: right;
  }
  &.centered {
  margin-left: auto;
  margin-right: auto;
  }
  &.fluid {
  display: block;
  width: 100%;
  height: auto;
  }
}
