@mixin clearfix() {
    &:before,
    &:after {
        content: " ";
        display: table;
    }
    &:after {
        clear: both;
    }
}

@mixin unlist(){
    &, ul, li{
        list-style-type:none;
        font-style: normal;
    }
    &, ul{
        margin-top:0;
        margin-bottom:0;
        padding-left:0;
    }
}

@mixin transition($transition...){
    body.ready &{
        -webkit-transition: $transition;
           -moz-transition: $transition;
             -o-transition: $transition;
                transition: $transition;
    }
}
@mixin transition-immediate($transition...){
    -webkit-transition: $transition;
       -moz-transition: $transition;
         -o-transition: $transition;
            transition: $transition;
}

@mixin transition-transform($transition...) {
  -webkit-transition: -webkit-transform $transition;
     -moz-transition: -moz-transform $transition;
       -o-transition: -o-transform $transition;
          transition: transform $transition;
}

@mixin transition-delay($delay...){
    body.ready &{
        -webkit-transition-delay: $delay;
           -moz-transition-delay: $delay;
             -o-transition-delay: $delay;
                transition-delay: $delay;
    }
}

@mixin notransition() {
    -webkit-transition: none !important;
       -moz-transition: none !important;
         -o-transition: none !important;
        -ms-transition: none !important;
            transition: none !important;
}

@mixin transform($transform){
    -moz-transform: $transform;
    -webkit-transform: $transform;
    -o-transform: $transform;
    -ms-transform: $transform;
    transform: $transform;
}

@mixin border-radius($radius){
    -webkit-border-radius: $radius;
            border-radius: $radius;
}

@mixin box-shadow($shadow){
    -webkit-box-shadow: $shadow; //e.g inset 2px 2px 3px 2px rgba(0, 0, 0, 1)
            box-shadow: $shadow;
}

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

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

@mixin visuallyvisible{
    clip:none;
    height:auto;
    width:auto;
    margin:auto;
    overflow:visible;
    position:initial;
}

.visuallyvisible{
    @include visuallyvisible;
}