.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

@mixin sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.skip-link {
    position: absolute;
    left: -999px;
    width:1px;
    height: 1px;
    top: 1em;
    padding: 1em 1.5em;
    color: black !important;
    background:  #FFF;
    z-index: 200;
}

.skip-link:focus {
        display: inline-block;
        height: auto;
        width: auto;
        position: absolute;
        margin: auto;
        transition: transform 1s ease-in;
        left: 2em;
    }

button:focus, a:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="email"]:focus {
        outline: 3px solid black;
        box-shadow: 0 0 0 6px #FFF;
        outline-offset: 2px;
        z-index: 1000;
    }

main:focus {
    outline: none;
}