figure {
    margin: 0;
}

img {
  max-width: 100%; // responsive images
  height:    auto; // keeps the image proportionate
  border:    none; // weird border bug in ie
}

// box model
input[type="search"],
*,
*:before,
*:after {
  box-sizing: border-box;
}

hr {
    margin: 2rem 0;
    border: 0;
    height: 0;
    border-bottom: 1px solid $light-grey;
}

// highlight a section
.highlight {
    background: $highlight-color;
}

.aligncenter {
    clear: both;
    display: block;
    margin: 0 auto 2rem auto;
}

.alignleft {
    float: left;
    margin: 0 2rem 2rem 0;
}

.alignright {
    float: right;
    margin: 0 0 2rem 2rem;
}

.hide {
    display: none;
}

.text-center-xs {
    text-align: center;
}

.text-left-xs {
    text-align: left;
}

body .no-padding {
    padding: 0;
}

@media #{$screen-sm}{

    .text-center-sm {
        text-align: center;
    }

    .text-left-sm {
        text-align: left;
    }

}

@media #{$screen-md}{

    .text-center-md {
        text-align: center;
    }

    .text-left-md {
        text-align: left;
    }

}

@media #{$screen-lg}{

    .text-center-lg {
        text-align: center;
    }

    .text-left-lg {
        text-align: left;
    }

}

@media (max-width: $screen-xs-max) {

  .hidden-xs {
    display: none !important;
  }

}
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {

  .hidden-sm {
    display: none !important;
  }

}
@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
  
  .hidden-md {
    display: none !important;
  }

}
@media (min-width: $screen-lg-min) {

  .hidden-lg {
    display: none !important;
  }

}