main.scss

@import "packages/wsk_material/sass/resets/h5bp";

@import "colors";
@import 'packages/wsk_material/sass/typography/typography';

@import 'packages/wsk_material/sass/layout/layout';
@import 'packages/wsk_material/sass/textfield/textfield';
@import 'packages/wsk_material/sass/animation/animation';
@import 'packages/wsk_material/sass/palette/palette';
@import 'packages/wsk_material/sass/list/list';
@import "packages/wsk_material/sass/shadow/shadow";
@import "packages/wsk_material/sass/button/button";

@import "packages/wsk_material/sass/footer/mega_footer";
@import "packages/wsk_material/sass/footer/mini_footer";



html, body {
    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;

    background-color: #F4F4F4;
}

body {
    display: flex;
    flex-direction: column;
}

.wsk-layout__content {
    padding: 0;

    section {
        padding: 24px;

        &:first-child {
            padding-top: 40px;
        }
    }

    h3 ~ h4 {
        padding-top: 20px;
    }
}

.cols {
    margin-top: 1em;

    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    flex-grow: 0;

    div {
        display: flex;
        flex-direction: column;
    }
}

.back-to-top {
    position: fixed; bottom: 500px; right: -100px; transition: all 0.3s ease-out; opacity: 0;
    z-index: 99;
}
.add-back-to-top-button .back-to-top {
    bottom: 15px; right: 15px;
    opacity: 1;
    transition: all 0.3s ease-in;
}
@media (max-width: 768px ) {
    .back-to-top {
        left: auto;
        right: -100px;
    }
    .add-back-to-top-button .back-to-top {
        left: auto;
        right: 15px;
        bottom: 15px;
    }
}