// ====================================================================================================================
// HELPER CLASSES
// ====================================================================================================================

.wrapper, .w {
	@extend .clearfix;
	margin: 0 auto;
	max-width: $desk-end;
	padding-left: $wrapper-padding;
	padding-right: $wrapper-padding;
}

.fixed-wrapper, .fw {
	@extend .clearfix;
	margin: 0 auto;
	width: $desk-end;
}

// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
// Sizes
// --------------------------------------------------------------------------------------------------------------------

$i: 100;
@while $i > 0 {
	%width-#{$i} { width: $i * 1% !important; }
	[data-width="#{$i}"] { @extend %width-#{$i}; }
	$i: $i - 1;
}

// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
// Transition class for @extend
// --------------------------------------------------------------------------------------------------------------------

.transition {
	@include transition();
}

.divider {
	@include nav-divider();
}

// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
// Text replacement (from http://html5boilerplate.com/)
// --------------------------------------------------------------------------------------------------------------------
.ir{background-color:transparent;border:0;overflow:hidden;text-indent:-9999px;line-height:0;font-size:0;}
.ir:before{content:"";display:block;width:0;height:150%}
.hidden{display:none!important;visibility:hidden}
.visuallyhidden{border:0;clip:rect(0000);height:1px;overflow:hidden;position:absolute;width:1px;margin:-1px;padding:0}
.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;height:auto;overflow:visible;position:static;width:auto;margin:0}
.invisible{visibility:hidden}