.bt-basic{
    display: inline-block;
    z-index: 1;
    padding: 15px 20px;
    overflow: hidden;
}

.bt-basic::before,
.bt-basic::after
{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    box-sizing: border-box;
    transition: inherit;
    transition-delay: inherit;
    transition-duration: inherit;
    transition-property: inherit;
    transition-timing-function: inherit;
}

.bt-basic::after
{
    border-width: 2px;
    border-style: solid;
    border-color: rgb(0,0,0);
    border-radius: inherit;
}

.bt-basic::before
{
    background-color: rgb(0,0,0);
    opacity: 0;
}


.bt-basic[class^='slider-']::before,
.bt-basic[class*=' slider-']::before,
.bt-basic.fill::before
{
    opacity: 1;
}

.bt-basic.slider-left::before{ left: -100%; }
.bt-basic.slider-right::before{ left: 100%; }
.bt-basic.slider-top::before{ top: -100%; }
.bt-basic.slider-bottom::before{ top: 100%; }

.bt-basic:hover::before,
.bt-basic:focus::before{ opacity: 1; }

.bt-basic[class^='slider-']:hover::before,
.bt-basic[class*=' slider-']:hover::before,
.bt-basic[class^='slider-']:focus::before,
.bt-basic[class*=' slider-']:focus::before{
    top: 0;
    left: 0;
}


[type="checkbox"]#NavControl
{
    position: absolute;
    z-index: -1;
    opacity: 0;
    width: 0;
    height: 0;
}

label[for="NavControl"]
{
    overflow: hidden;
    position: fixed;
    display: block;
    top: 0;
    right: -100%;
    z-index: 100;
}

label[for="NavControl"].left{
    right: auto;
    left: 0;
}

label[for="NavControl"]::before,
label[for="NavControl"]::after
{
    font-family: 'linearicons';
    display: block;
    position: absolute;
    box-sizing: border-box;
    top: 50%;
    transition: inherit;
}

label[for="NavControl"]::before
{
    content: '\e871';
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

label[for="NavControl"]::after
{
    content: '\e870';
    left: -50%;
    transform: translateX(-50%) translateY(-50%) rotateZ(45deg);
}

label[for="NavControl"]:hover::before,
label[for="NavControl"]:focus::before,
[type="checkbox"]#NavControl:focus + label[for="NavControl"]::before,
[type="checkbox"]#NavControl:checked + label[for="NavControl"]::before
{
    left: 150%;
}

label[for="NavControl"]:hover::after,
label[for="NavControl"]:focus::after,
[type="checkbox"]#NavControl:focus + label[for="NavControl"]::after,
[type="checkbox"]#NavControl:checked + label[for="NavControl"]::after
{
    left: 50%;
}

[type="checkbox"]#NavControl:checked + label[for="NavControl"]::after{
    transform: translateX(-50%) translateY(-50%) rotateZ(0deg);
}

@media (max-width: 1280px) {
    label[activate='1280']{ right: 0; }
}
@media (max-width: 1024px) {
    label[activate='1024']{ right: 0; }
}
@media (max-width: 980px) {
    label[activate='980']{ right: 0; }
}
@media (max-width: 768px) {
    label[activate='768']{ right: 0; }
}
@media (max-width: 640px) {
    label[activate='640']{ right: 0; }
}
@media (max-width: 480px) {
    label[activate='480']{ right: 0; }
}
@media (max-width: 360px) {
    label[activate='360']{ right: 0; }
}