
.margin-end {
  .func-margin-end(20px)!important;
}

.margin-start {
  .func-margin-start(20px)!important;
}

.margin-end-small {
  .func-margin-end(10px)!important;
}

.margin-start-small {
  .func-margin-start(10px)!important;
}

.margin-end-large {
  .func-margin-end(50px)!important;
}

.margin-start-large {
  .func-margin-start(50px)!important;
}

.margin-end-no {
  .func-margin-end(0)!important;
}

.margin-start-no {
  .func-margin-start(0)!important;
}

.margin-top {
  margin-top: 30px!important;
}

.margin-bottom {
  margin-bottom: 30px!important;
}

.margin-top-no {
  margin-top: 0!important;
}

.margin-bottom-no {
  margin-bottom: 0!important;
}

.margin-top-xxl {
  margin-top: 140px!important;
}

.margin-top-xl {
  margin-top: 80px!important;
}

.margin-top-large {
  margin-top: 50px!important;
}

.margin-top-small {
  margin-top: 15px!important;
}

.margin-top-tiny {
  margin-top: 5px!important;
}

.margin-top-negative {
  margin-top: -30px!important;
}

.margin-top-negative-tiny {
  margin-top: -5px!important;
}

.margin-top-negative-small {
  margin-top: -15px!important;
}

.margin-top-negative-large {
  margin-top: -50px!important;
}

.margin-top-negative-xl {
  margin-top: -80px!important;
}

.margin-top-negative-xxl {
  margin-top: -100px!important;
}

.margin-bottom-xxl {
  margin-bottom: 140px!important;
}

.margin-bottom-xl {
  margin-bottom: 80px!important;
}

.margin-bottom-large {
  margin-bottom: 50px!important;
}

.margin-bottom-small {
  margin-bottom: 15px!important;
}

.margin-bottom-tiny {
  margin-bottom: 5px!important;
}

.margin-bottom-negative {
  margin-bottom: -30px!important;
}

.margin-bottom-negative-tiny {
  margin-bottom: -5px!important;
}

.margin-bottom-negative-small {
  margin-bottom: -15px!important;
}

.margin-bottom-negative-large {
  margin-bottom: -50px!important;
}

.margin-bottom-negative-xl {
  margin-bottom: -80px!important;
}

.margin-bottom-negative-xl {
  margin-bottom: -100px!important;
}

.func-rotate(@value) {
  -webkit-transform: rotate(@value);
  -moz-transform: rotate(@value);
  -o-transform: rotate(@value);
  -ms-transform: rotate(@value);
  transform: rotate(@value);
}

.ratio-wide {
  height: 0;
  overflow: hidden;
  padding-top: 56%;
  position: relative;
  width: 100%;

  & > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

.ratio-square {
  height: 0;
  overflow: hidden;
  padding-top: 56%;
  position: relative;
  width: 100%;

  & > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

.clear {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}
