/*
 * PureIcons.css v0.3.0
 *
 * Copyright 2021 Bunoon
 * Released under the GNU AGPLv3 license
 */
/*
    -------------------------------------------------------------------------
    PureIcons.css - Arrows
    -------------------------------------------------------------------------
*/
.ib-arrow-top-left {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
  width: 18px;
  height: 18px;
  border-left: 6px solid #282828;
  border-top: 6px solid #282828;
  border-radius: 0;
}

.ib-arrow-top-left:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-arrow-top-left:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-arrow-top-right {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
  width: 18px;
  height: 18px;
  border-right: 6px solid #282828;
  border-top: 6px solid #282828;
  border-radius: 0;
}

.ib-arrow-top-right:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-arrow-top-right:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-arrow-bottom-left {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
  width: 18px;
  height: 18px;
  border-left: 6px solid #282828;
  border-bottom: 6px solid #282828;
  border-radius: 0;
}

.ib-arrow-bottom-left:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-arrow-bottom-left:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-arrow-bottom-right {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
  width: 18px;
  height: 18px;
  border-right: 6px solid #282828;
  border-bottom: 6px solid #282828;
  border-radius: 0;
}

.ib-arrow-bottom-right:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-arrow-bottom-right:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-arrow-top-left-small {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-arrow-top-left-small:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-arrow-top-left-small:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-arrow-top-left-small:before {
  position: absolute;
  content: "";
  width: 6px;
  height: 6px;
  border-left: 6px solid #282828;
  border-top: 6px solid #282828;
  border-radius: 0;
  left: 0;
  top: 0;
}

.ib-arrow-top-right-small {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-arrow-top-right-small:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-arrow-top-right-small:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-arrow-top-right-small:before {
  position: absolute;
  content: "";
  width: 6px;
  height: 6px;
  border-right: 6px solid #282828;
  border-top: 6px solid #282828;
  border-radius: 0;
  right: 0;
  top: 0;
}

.ib-arrow-bottom-left-small {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-arrow-bottom-left-small:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-arrow-bottom-left-small:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-arrow-bottom-left-small:before {
  position: absolute;
  content: "";
  width: 6px;
  height: 6px;
  border-left: 6px solid #282828;
  border-bottom: 6px solid #282828;
  border-radius: 0;
  left: 0;
  bottom: 0;
}

.ib-arrow-bottom-right-small {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-arrow-bottom-right-small:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-arrow-bottom-right-small:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-arrow-bottom-right-small:before {
  position: absolute;
  content: "";
  width: 6px;
  height: 6px;
  border-right: 6px solid #282828;
  border-bottom: 6px solid #282828;
  border-radius: 0;
  right: 0;
  bottom: 0;
}

.ib-arrow-up-full {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 24px solid #282828;
}

.ib-arrow-up-full:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-arrow-up-full:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-arrow-down-full {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
  width: 0;
  height: 0;
  border-top: 24px solid #282828;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
}

.ib-arrow-down-full:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-arrow-down-full:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-arrow-left-full {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 24px solid #282828;
}

.ib-arrow-left-full:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-arrow-left-full:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-arrow-right-full {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 24px solid #282828;
}

.ib-arrow-right-full:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-arrow-right-full:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-arrow-left-full-line {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-arrow-left-full-line:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-arrow-left-full-line:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-arrow-left-full-line:before, .ib-arrow-left-full-line:after {
  position: absolute;
  content: "";
}

.ib-arrow-left-full-line:before {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 12px solid #282828;
  left: 0;
  top: 0;
}

.ib-arrow-left-full-line:after {
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  width: 12px;
  height: 12px;
  background-color: #282828;
  right: 0;
}

.ib-arrow-right-full-line {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-arrow-right-full-line:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-arrow-right-full-line:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-arrow-right-full-line:before, .ib-arrow-right-full-line:after {
  position: absolute;
  content: "";
}

.ib-arrow-right-full-line:before {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 12px solid #282828;
  right: 0;
  top: 0;
}

.ib-arrow-right-full-line:after {
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  width: 12px;
  height: 12px;
  background-color: #282828;
  left: 0;
}

.ib-arrow-up-full-line {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-arrow-up-full-line:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-arrow-up-full-line:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-arrow-up-full-line:before, .ib-arrow-up-full-line:after {
  position: absolute;
  content: "";
}

.ib-arrow-up-full-line:before {
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #282828;
  left: 0;
  top: 0;
}

.ib-arrow-up-full-line:after {
  left: 50%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  width: 12px;
  height: 12px;
  background-color: #282828;
  bottom: 0;
}

.ib-arrow-down-full-line {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-arrow-down-full-line:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-arrow-down-full-line:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-arrow-down-full-line:before, .ib-arrow-down-full-line:after {
  position: absolute;
  content: "";
}

.ib-arrow-down-full-line:before {
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid #282828;
  left: 0;
  bottom: 0;
}

.ib-arrow-down-full-line:after {
  left: 50%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  width: 12px;
  height: 12px;
  background-color: #282828;
  top: 0;
}

.ib-arrow-up {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-arrow-up:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-arrow-up:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-arrow-up:before {
  position: absolute;
  content: "";
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  border-right: 6px solid #282828;
  border-top: 6px solid #282828;
  border-radius: 0;
  width: 11px;
  height: 11px;
  left: 3.5px;
  top: 3.5px;
}

.ib-arrow-down {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-arrow-down:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-arrow-down:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-arrow-down:before {
  position: absolute;
  content: "";
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-right: 6px solid #282828;
  border-bottom: 6px solid #282828;
  border-radius: 0;
  width: 11px;
  height: 11px;
  left: 3.5px;
  bottom: 3.5px;
}

.ib-arrow-left {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-arrow-left:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-arrow-left:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-arrow-left:before {
  position: absolute;
  content: "";
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  border-left: 6px solid #282828;
  border-top: 6px solid #282828;
  border-radius: 0;
  width: 11px;
  height: 11px;
  left: 3.5px;
  top: 3.5px;
}

.ib-arrow-right {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-arrow-right:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-arrow-right:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-arrow-right:before {
  position: absolute;
  content: "";
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-right: 6px solid #282828;
  border-top: 6px solid #282828;
  border-radius: 0;
  width: 11px;
  height: 11px;
  right: 3.5px;
  top: 3.5px;
}

.ib-arrow-expand-left-right {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-arrow-expand-left-right:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-arrow-expand-left-right:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-arrow-expand-left-right:before, .ib-arrow-expand-left-right:after {
  position: absolute;
  content: "";
}

.ib-arrow-expand-left-right:before {
  border-left: 6px solid #282828;
  border-bottom: 6px solid #282828;
  border-radius: 0;
  width: 12px;
  height: 12px;
  bottom: 0;
  left: 0;
}

.ib-arrow-expand-left-right:after {
  border-right: 6px solid #282828;
  border-top: 6px solid #282828;
  border-radius: 0;
  width: 12px;
  height: 12px;
  top: 0;
  right: 0;
}

.ib-arrow-expand-right-left {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-arrow-expand-right-left:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-arrow-expand-right-left:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-arrow-expand-right-left:before, .ib-arrow-expand-right-left:after {
  position: absolute;
  content: "";
}

.ib-arrow-expand-right-left:before {
  border-left: 6px solid #282828;
  border-top: 6px solid #282828;
  border-radius: 0;
  width: 12px;
  height: 12px;
  top: 0;
  left: 0;
}

.ib-arrow-expand-right-left:after {
  border-right: 6px solid #282828;
  border-bottom: 6px solid #282828;
  border-radius: 0;
  width: 12px;
  height: 12px;
  bottom: 0;
  right: 0;
}

.ib-arrow-contract-left-right {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-arrow-contract-left-right:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-arrow-contract-left-right:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-arrow-contract-left-right:before, .ib-arrow-contract-left-right:after {
  position: absolute;
  content: "";
}

.ib-arrow-contract-left-right:before {
  border-right: 6px solid #282828;
  border-top: 6px solid #282828;
  border-radius: 0;
  width: 6px;
  height: 6px;
  bottom: 0;
  left: 0;
}

.ib-arrow-contract-left-right:after {
  border-left: 6px solid #282828;
  border-bottom: 6px solid #282828;
  border-radius: 0;
  width: 6px;
  height: 6px;
  top: 0;
  right: 0;
}

.ib-arrow-contract-right-left {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-arrow-contract-right-left:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-arrow-contract-right-left:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-arrow-contract-right-left:before, .ib-arrow-contract-right-left:after {
  position: absolute;
  content: "";
}

.ib-arrow-contract-right-left:before {
  border-right: 6px solid #282828;
  border-bottom: 6px solid #282828;
  border-radius: 0;
  width: 6px;
  height: 6px;
  top: 0;
  left: 0;
}

.ib-arrow-contract-right-left:after {
  border-left: 6px solid #282828;
  border-top: 6px solid #282828;
  border-radius: 0;
  width: 6px;
  height: 6px;
  bottom: 0;
  right: 0;
}

/*
    -------------------------------------------------------------------------
    PureIcons.css - Shapes
    -------------------------------------------------------------------------
*/
.ib-square {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
  background-color: #282828;
  border-radius: 0;
}

.ib-square:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-square:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-square-hollow {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
  border: 6px solid #282828;
  border-radius: 0;
  width: 12px;
  height: 12px;
}

.ib-square-hollow:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-square-hollow:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-square-dot {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
  border: 6px solid #282828;
  border-radius: 0;
  width: 12px;
  height: 12px;
}

.ib-square-dot:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-square-dot:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-square-dot:before {
  position: absolute;
  content: "";
  left: calc(50% - 3px);
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  background-color: #282828;
  width: 6px;
  height: 6px;
  border-radius: 0;
}

.ib-square-four {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
  border: 6px solid #282828;
  border-radius: 0;
  width: 12px;
  height: 12px;
}

.ib-square-four:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-square-four:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-square-four:before, .ib-square-four:after {
  position: absolute;
  content: "";
}

.ib-square-four:before {
  background-color: #282828;
  width: 6px;
  height: 6px;
  left: 0;
  top: 0;
}

.ib-square-four:after {
  background-color: #282828;
  width: 6px;
  height: 6px;
  right: 0;
  bottom: 0;
}

.ib-circle {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
  background-color: #282828;
  border-radius: 50%;
}

.ib-circle:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-circle:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-circle-hollow {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
  border: 6px solid #282828;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.ib-circle-hollow:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-circle-hollow:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-circle-dot {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
  border: 6px solid #282828;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.ib-circle-dot:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-circle-dot:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-circle-dot:before {
  position: absolute;
  content: "";
  left: calc(50% - 3px);
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  background-color: #282828;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.ib-circle-stop {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
  border: 6px solid #282828;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.ib-circle-stop:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-circle-stop:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-circle-stop:before {
  position: absolute;
  content: "";
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  background-color: #282828;
  width: 100%;
  height: 6px;
  border-radius: 0;
  left: 0;
}

.ib-rhombus {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-rhombus:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-rhombus:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-rhombus:before {
  position: absolute;
  content: "";
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  background-color: #282828;
  border-radius: 0;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
}

.ib-rhombus-hollow {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-rhombus-hollow:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-rhombus-hollow:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-rhombus-hollow:before {
  position: absolute;
  content: "";
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  border: 6px solid #282828;
  border-radius: 0;
  width: 6px;
  height: 6px;
  left: 3px;
  top: 3px;
}

.ib-octagon {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-octagon:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-octagon:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-octagon:before, .ib-octagon:after {
  position: absolute;
  content: "";
}

.ib-octagon:before {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  background-color: #282828;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
}

.ib-octagon:after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  background-color: #282828;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
}

.ib-octagon-hollow {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-octagon-hollow:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-octagon-hollow:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-octagon-hollow:before, .ib-octagon-hollow:after {
  position: absolute;
  content: "";
}

.ib-octagon-hollow:before {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  border: 6px solid #282828;
  width: 6px;
  height: 6px;
  left: 3px;
  top: 3px;
}

.ib-octagon-hollow:after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  border: 6px solid #282828;
  width: 6px;
  height: 6px;
  left: 3px;
  top: 3px;
}

.ib-trapezoid {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
  width: 8px;
  height: 0;
  border-bottom: 24px solid #282828;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
}

.ib-trapezoid:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-trapezoid:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

/*
    -------------------------------------------------------------------------
    PureIcons.css - Characters
    -------------------------------------------------------------------------
*/
.ib-plus {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-plus:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-plus:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-plus:before, .ib-plus:after {
  position: absolute;
  content: "";
}

.ib-plus:before {
  left: 50%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  background-color: #282828;
  width: 6px;
  height: 100%;
  border-radius: 0;
  top: 0;
}

.ib-plus:after {
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  background-color: #282828;
  width: 100%;
  height: 6px;
  border-radius: 0;
  left: 0;
}

.ib-exclamation-mark {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-exclamation-mark:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-exclamation-mark:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-exclamation-mark:before, .ib-exclamation-mark:after {
  position: absolute;
  content: "";
}

.ib-exclamation-mark:before {
  left: 50%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  background-color: #282828;
  width: 6px;
  height: calc(100% - 6px - 2px);
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  top: 0;
}

.ib-exclamation-mark:after {
  left: 50%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  background-color: #282828;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  bottom: 0;
}

.ib-minus {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-minus:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-minus:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-minus:before {
  position: absolute;
  content: "";
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  background-color: #282828;
  width: 100%;
  height: 6px;
  border-radius: 0;
  left: 0;
}

.ib-underscore {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-underscore:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-underscore:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-underscore:before {
  position: absolute;
  content: "";
  background-color: #282828;
  width: 100%;
  height: 6px;
  border-radius: 0;
  left: 0;
  bottom: 0;
}

.ib-pipe {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-pipe:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-pipe:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-pipe:before {
  position: absolute;
  content: "";
  left: 50%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  background-color: #282828;
  width: 6px;
  height: 100%;
  border-radius: 0;
  top: 0;
}

.ib-equals {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-equals:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-equals:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-equals:before, .ib-equals:after {
  position: absolute;
  content: "";
}

.ib-equals:before {
  top: calc(50% - 6px);
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  background-color: #282828;
  width: 100%;
  height: 6px;
  border-radius: 0;
  left: 0;
}

.ib-equals:after {
  top: calc(50% + 6px);
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  background-color: #282828;
  width: 100%;
  height: 6px;
  border-radius: 0;
  left: 0;
}

.ib-full-stop {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-full-stop:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-full-stop:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-full-stop:before {
  position: absolute;
  content: "";
  left: 50%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  background-color: #282828;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  bottom: 0;
}

.ib-square-bracket-left {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-square-bracket-left:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-square-bracket-left:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-square-bracket-left:before {
  position: absolute;
  content: "";
  left: 50%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  border-top: 6px solid #282828;
  border-bottom: 6px solid #282828;
  border-left: 6px solid #282828;
  border-radius: 0;
  width: 25%;
  height: 12px;
  top: 0;
}

.ib-square-bracket-right {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-square-bracket-right:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-square-bracket-right:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-square-bracket-right:before {
  position: absolute;
  content: "";
  left: 50%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  border-top: 6px solid #282828;
  border-bottom: 6px solid #282828;
  border-right: 6px solid #282828;
  border-radius: 0;
  width: 25%;
  height: 12px;
  top: 0;
}

.ib-colon {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-colon:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-colon:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-colon:before, .ib-colon:after {
  position: absolute;
  content: "";
}

.ib-colon:before {
  left: calc(50% - 3px);
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  top: calc(50% - 6px);
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  background-color: #282828;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.ib-colon:after {
  left: calc(50% - 3px);
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  top: calc(50% + 6px);
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  background-color: #282828;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.ib-hash {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-hash:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-hash:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-hash:before, .ib-hash:after {
  position: absolute;
  content: "";
}

.ib-hash:before {
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  border-top: 6px solid #282828;
  border-bottom: 6px solid #282828;
  width: 100%;
  height: 2px;
  border-radius: 0;
  left: 0;
}

.ib-hash:after {
  left: 50%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  border-left: 6px solid #282828;
  border-right: 6px solid #282828;
  width: 2px;
  height: 100%;
  border-radius: 0;
  top: 0;
}

.ib-quote {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-quote:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-quote:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-quote:before, .ib-quote:after {
  position: absolute;
  content: "";
}

.ib-quote:before {
  left: calc(50% - 6px);
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  background-color: #282828;
  width: 6px;
  height: 12px;
  border-radius: 0;
  top: 0;
}

.ib-quote:after {
  left: calc(50% + 6px);
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  background-color: #282828;
  width: 6px;
  height: 12px;
  border-radius: 0;
  top: 0;
}

.ib-speech-mark {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-speech-mark:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-speech-mark:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-speech-mark:before {
  position: absolute;
  content: "";
  left: 50%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  background-color: #282828;
  width: 6px;
  height: 12px;
  border-radius: 0;
  top: 0;
}

.ib-not {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-not:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-not:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-not:before {
  position: absolute;
  content: "";
  border-top: 6px solid #282828;
  border-right: 6px solid #282828;
  width: 18px;
  height: 12px;
  border-radius: 0;
  left: 0;
  top: 0;
}

.ib-back-slash {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-back-slash:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-back-slash:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-back-slash:after {
  position: absolute;
  content: "";
  -webkit-transform: rotate(-22.5deg);
  transform: rotate(-22.5deg);
  width: 6px;
  height: 24px;
  background-color: #282828;
  border-radius: 0;
  left: 9px;
  top: 0px;
}

.ib-forward-slash {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-forward-slash:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-forward-slash:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-forward-slash:after {
  position: absolute;
  content: "";
  -webkit-transform: rotate(22.5deg);
  transform: rotate(22.5deg);
  width: 6px;
  height: 24px;
  background-color: #282828;
  border-radius: 0;
  left: 9px;
  top: 0px;
}

/*
    -------------------------------------------------------------------------
    PureIcons.css - World
    -------------------------------------------------------------------------
*/
.ib-crescent-left {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-crescent-left:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-crescent-left:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-crescent-left:before {
  position: absolute;
  content: "";
  border-left: 6px solid #282828;
  border-radius: 50%;
  width: 18px;
  height: 100%;
  left: 6px;
  top: 0;
}

.ib-crescent-right {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-crescent-right:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-crescent-right:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-crescent-right:before {
  position: absolute;
  content: "";
  border-right: 6px solid #282828;
  border-radius: 50%;
  width: 18px;
  height: 100%;
  right: 6px;
  top: 0;
}

.ib-crescent-up {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-crescent-up:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-crescent-up:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-crescent-up:before {
  position: absolute;
  content: "";
  border-top: 6px solid #282828;
  border-radius: 50%;
  width: 100%;
  height: 18px;
  left: 0;
  top: 6px;
}

.ib-crescent-down {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-crescent-down:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-crescent-down:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-crescent-down:before {
  position: absolute;
  content: "";
  border-bottom: 6px solid #282828;
  border-radius: 50%;
  width: 100%;
  height: 18px;
  left: 0;
  bottom: 6px;
}

/*
    -------------------------------------------------------------------------
    PureIcons.css - Media
    -------------------------------------------------------------------------
*/
.ib-pause {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-pause:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-pause:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-pause:before, .ib-pause:after {
  position: absolute;
  content: "";
}

.ib-pause:before {
  left: calc(50% - 6px);
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  background-color: #282828;
  width: 6px;
  height: 100%;
  border-radius: 0;
  top: 0;
}

.ib-pause:after {
  left: calc(50% + 6px);
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  background-color: #282828;
  width: 6px;
  height: 100%;
  border-radius: 0;
  top: 0;
}

.ib-folder {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-folder:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-folder:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-folder:before, .ib-folder:after {
  position: absolute;
  content: "";
}

.ib-folder:before {
  background-color: #282828;
  width: 24px;
  height: 21px;
  bottom: 0;
  left: 0;
}

.ib-folder:after {
  background-color: #4e4e4e;
  width: 12px;
  height: 3px;
  left: 3px;
  top: 0;
}

.ib-eject {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-eject:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-eject:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-eject:before, .ib-eject:after {
  position: absolute;
  content: "";
}

.ib-eject:before {
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 15px solid #282828;
  left: 0;
  top: 0;
}

.ib-eject:after {
  width: 100%;
  height: 6px;
  background-color: #282828;
  border-radius: 0;
  left: 0;
  bottom: 0;
}

.ib-previous {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-previous:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-previous:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-previous:before, .ib-previous:after {
  position: absolute;
  content: "";
}

.ib-previous:before {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 15px solid #282828;
  left: 0;
  top: 0;
}

.ib-previous:after {
  width: 6px;
  height: 100%;
  background-color: #282828;
  border-radius: 0;
  right: 0;
  top: 0;
}

.ib-next {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-next:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-next:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-next:before, .ib-next:after {
  position: absolute;
  content: "";
}

.ib-next:before {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 15px solid #282828;
  right: 0;
  top: 0;
}

.ib-next:after {
  width: 6px;
  height: 100%;
  background-color: #282828;
  border-radius: 0;
  left: 0;
  top: 0;
}

.ib-first {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-first:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-first:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-first:before, .ib-first:after {
  position: absolute;
  content: "";
}

.ib-first:before {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 15px solid #282828;
  right: 0;
  top: 0;
}

.ib-first:after {
  width: 6px;
  height: 100%;
  background-color: #282828;
  border-radius: 0;
  left: 0;
  top: 0;
}

.ib-last {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-last:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-last:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-last:before, .ib-last:after {
  position: absolute;
  content: "";
}

.ib-last:before {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 15px solid #282828;
  left: 0;
  top: 0;
}

.ib-last:after {
  width: 6px;
  height: 100%;
  background-color: #282828;
  border-radius: 0;
  right: 0;
  top: 0;
}

.ib-rewind {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-rewind:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-rewind:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-rewind:before, .ib-rewind:after {
  position: absolute;
  content: "";
}

.ib-rewind:before {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 12px solid #282828;
  left: 0;
  top: 0;
}

.ib-rewind:after {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 12px solid #282828;
  right: 0;
  top: 0;
}

.ib-forward {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-forward:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-forward:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-forward:before, .ib-forward:after {
  position: absolute;
  content: "";
}

.ib-forward:before {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 12px solid #282828;
  right: 0;
  top: 0;
}

.ib-forward:after {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 12px solid #282828;
  left: 0;
  top: 0;
}

.ib-play-pause {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-play-pause:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-play-pause:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-play-pause:before, .ib-play-pause:after {
  position: absolute;
  content: "";
}

.ib-play-pause:before {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 9px solid #282828;
  left: 0;
  top: 0;
}

.ib-play-pause:after {
  border-left: 6px solid #282828;
  border-right: 6px solid #282828;
  width: 2px;
  border-radius: 0;
  height: 100%;
  right: 0;
  top: 0;
}

/*
    -------------------------------------------------------------------------
    PureIcons.css - Other
    -------------------------------------------------------------------------
*/
.ib-pin {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
  height: 18px;
  border-top: 6px solid #282828;
  border-radius: 50%;
}

.ib-pin:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-pin:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-pin:before, .ib-pin:after {
  position: absolute;
  content: "";
}

.ib-pin:before {
  left: 50%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  background-color: #282828;
  width: 6px;
  height: calc(100% - 6px - 2px);
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  top: 0;
}

.ib-pin:after {
  left: 50%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  background-color: #282828;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  bottom: 0;
}

.ib-refresh {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-refresh:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-refresh:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-refresh:before, .ib-refresh:after {
  position: absolute;
  content: "";
}

.ib-refresh:before {
  border-top: 6px solid #282828;
  border-left: 6px solid #282828;
  border-radius: 0;
  width: 10px;
  height: 18px;
  left: 0;
  top: 0;
}

.ib-refresh:after {
  border-bottom: 6px solid #282828;
  border-right: 6px solid #282828;
  border-radius: 0;
  width: 10px;
  height: 18px;
  right: 0;
  top: 0;
}

.ib-hamburger {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
  border-top: 6px solid #282828;
  border-bottom: 6px solid #282828;
  border-radius: 0;
  height: 12px;
}

.ib-hamburger:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-hamburger:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-hamburger:before {
  position: absolute;
  content: "";
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  background-color: #282828;
  width: 100%;
  height: 6px;
  border-radius: 0;
  left: 0;
}

.ib-dot {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-dot:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-dot:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-dot:before {
  position: absolute;
  content: "";
  left: calc(50% - 3px);
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  background-color: #282828;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.ib-eye {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
  border-top: 6px solid #282828;
  border-bottom: 6px solid #282828;
  border-radius: 50%;
  height: 12px;
}

.ib-eye:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-eye:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-eye:before {
  position: absolute;
  content: "";
  left: calc(50% - 3px);
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  background-color: #282828;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.ib-eye-side {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
  border-left: 6px solid #282828;
  border-right: 6px solid #282828;
  border-radius: 50%;
  width: 12px;
}

.ib-eye-side:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-eye-side:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-eye-side:before {
  position: absolute;
  content: "";
  left: calc(50% - 3px);
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  background-color: #282828;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.ib-hourglass {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-hourglass:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-hourglass:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-hourglass:before, .ib-hourglass:after {
  position: absolute;
  content: "";
}

.ib-hourglass:before {
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 15px solid #282828;
  left: 0;
  bottom: 0;
}

.ib-hourglass:after {
  width: 0;
  height: 0;
  border-top: 15px solid #282828;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  left: 0;
  top: 0;
}

.ib-close {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-close:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-close:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-close:before, .ib-close:after {
  position: absolute;
  content: "";
}

.ib-close:before, .ib-close:after {
  width: 6px;
  height: 27px;
  background-color: #282828;
  border-radius: 0;
  left: 9px;
  top: -1.5px;
}

.ib-close:before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.ib-close:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.ib-bar-graph {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
  border-left: 6px solid #282828;
  width: 18px;
}

.ib-bar-graph:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-bar-graph:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-bar-graph:before, .ib-bar-graph:after {
  position: absolute;
  content: "";
}

.ib-bar-graph:before {
  left: calc(50% - 3px);
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  background-color: #282828;
  width: 6px;
  height: 8px;
  bottom: 0;
}

.ib-bar-graph:after {
  background-color: #282828;
  width: 6px;
  height: 12px;
  bottom: 0;
  right: 0;
}

.ib-expand {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-expand:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-expand:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-expand:before, .ib-expand:after {
  position: absolute;
  content: "";
}

.ib-expand:before {
  border-left: 6px solid #282828;
  border-right: 6px solid #282828;
  width: 12px;
  height: 6px;
  border-radius: 0;
  left: 0;
  top: 0;
}

.ib-expand:after {
  border-left: 6px solid #282828;
  border-right: 6px solid #282828;
  width: 12px;
  height: 6px;
  border-radius: 0;
  left: 0;
  bottom: 0;
}

.ib-search {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.ib-search:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-search:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-search:before, .ib-search:after {
  position: absolute;
  content: "";
}

.ib-search:before {
  border: 6px solid #282828;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  left: 0;
  top: 0;
}

.ib-search:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  width: 6px;
  height: 12px;
  background-color: #282828;
  border-radius: 0;
  right: 4px;
  bottom: 1px;
}

.ib-wi-fi {
  width: 24px;
  height: 24px;
  display: inline-block;
  position: relative;
  border-top: 6px solid #282828;
  border-radius: 0;
  height: 18px;
}

.ib-wi-fi:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  cursor: pointer;
  opacity: 0.7;
}

.ib-wi-fi:active {
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer;
  opacity: 0.5;
}

.ib-wi-fi:before, .ib-wi-fi:after {
  position: absolute;
  content: "";
}

.ib-wi-fi:before {
  left: 50%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  background-color: #282828;
  width: 6px;
  height: 6px;
  border-radius: 0;
  bottom: 0;
}

.ib-wi-fi:after {
  left: calc(50% - 6px);
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  top: calc(50% - 3px);
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  background-color: #282828;
  width: 12px;
  height: 6px;
  border-radius: 0;
}
/*# sourceMappingURL=pureicons.css.map */