app/soc/content/less/soc/elements/helper.less

// uncomment this if you're feeling daring
// * { 
//   @include box-sizing(border-box);
// }

img {
  // for fluid images
  max-width: 100%;
  // Remove the gap between images and the bottom of their containers: h5bp.com/i/440
  vertical-align: middle;
}

// fluid video
.fluidvideowrapper {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;

  object, embed, iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

// Dont break or wrap text
.nobr, .together {
  white-space: nowrap;
}

// Image replacement
.ir {
  background-color: transparent;
  border: 0;
  overflow: hidden;
  /* IE 6/7 fallback */
  *text-indent: -9999px;
}

.ir:before {
  content: "";
  display: block;
  width: 0;
  height: 100%;
}

// Hide from both screenreaders and browsers: h5bp.com/u
.hidden {
  display: none !important;
  visibility: hidden;
}

// Hide only visually, but have it available for screenreaders: h5bp.com/v
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

// Extends the .visuallyhidden class to allow the element to be focusable
// when navigated to via the keyboard: h5bp.com/p
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

// Hide visually and from screenreaders, but maintain layout
.invisible {
  visibility: hidden;
}

// text alignment
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.clearfix {
  .clearfix;
}