// —————————————————————————– // Helper classes. // —————————————————————————–

.alignleft {

float: left; 
margin: 0.5em 1em 0.5em 0;

}

.aligncentre {

display: block;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;

}

.alignright {

float: right;
margin: 0.5em 0 0.5em 1em;

}

.clearfix {

@extend %clearfix;

}

.hidden {

display: none !important;
visibility: hidden;

}

.invisible {

visibility: hidden;

}

.ir {

background-color: transparent;
border: 0;
overflow: hidden;
*text-indent: -9999px;

&:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

}

.visuallyhidden {

border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;

&.focusable:active,
&.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

}

%bg-white {

background-color: white;

}

%button {

padding: 0.25em;
&:hover {
    @include rounded(0.25em);
    background: $colour-base;
    border: none;
    color: white;
}

}

%central {

margin: 0 auto;

}

%clearfix {

&:before,
&:after {
    content: " ";
    display: block;
}

&:after {
    clear: both;
}

*zoom: 1;

}

%divider-gradient {

@extend %central;
content: ' ';
display: block;
height: 1px;
max-width: 80%;

}

%divider-gradient-top {

@extend %divider-gradient;
background: $colour-lightgrey;
@include linear-gradient(#ffffff, $colour-base, #ffffff);

}

%divider-gradient-bottom {

@extend %divider-gradient;
background: #ffffff;
@include linear-gradient(#ffffff, $colour-lightgrey, #ffffff);

}

%text-centre {

text-align: center;

}