[role="main"] { 
    float: right; 
    z-index: 1; 
    position: relative; 
}

[role="main"]:before { 
    content: " "; 
    position: absolute;
    z-index: -1; 
    top: 0; 
    left: -100%; 
    width: 100%; 
    height: 100%; 
}

[role="complementary"], [role="main"] { 
    width: 100%; 
    padding: 0; 
    display: block; 
    position: relative; 
    z-index: 1; 
    -webkit-transition: 0.25s all ease-in; 
    -moz-transition: 0.25s all ease-in; 
    -o-transition: 0.25s all ease-in; 
    transition: 0.25s all ease-in; 
}

[role="complementary"] { 
    margin-left: -100%; 
    width: 80%; 
    float: left; 
    z-index: 2; 
}

.active [role="main"] { 
    margin-right: -80%; 
}

.active [role="complementary"] { 
    margin-left: 0; 
}

@media all and (min-width: 940px) { 
    [role="complementary"] { 
        width: 20%; 
        margin-left: 0; 
        float: left; 
        padding: 0 15px; 
    }
    
    [role="main"] { 
        width: 80%; 
        padding: 0; 
    }
    
    .hide-extras [role="main"] { 
        width: 100%; 
    }
    
    .hide-extras [role="complementary"] { 
        display: none; 
    }
}