.cf:before,
.cf:after {
  content: " ";
  display: table;
}
.cf:after {
  clear: both;
}
.cf {
  *zoom: 1;
}

.cl {
  clear: left;
}
.cr {
  clear: right;
}
.cb {
  clear: both;
}
.cn {
  clear: none;
}

@media screen and (min-width: 30em) {
  .cl-ns {
    clear: left;
  }
  .cr-ns {
    clear: right;
  }
  .cb-ns {
    clear: both;
  }
  .cn-ns {
    clear: none;
  }
}

@media screen and (min-width: 30em) and (max-width: 60em) {
  .cl-m {
    clear: left;
  }
  .cr-m {
    clear: right;
  }
  .cb-m {
    clear: both;
  }
  .cn-m {
    clear: none;
  }
}

@media screen and (max-width: 60em) and (orientation: landscape) {
  .cl-ml {
    clear: left;
  }
  .cr-ml {
    clear: right;
  }
  .cb-ml {
    clear: both;
  }
  .cn-ml {
    clear: none;
  }
}

@media screen and (min-width: 60em) {
  .cl-l {
    clear: left;
  }
  .cr-l {
    clear: right;
  }
  .cb-l {
    clear: both;
  }
  .cn-l {
    clear: none;
  }
}