.bw-app {

position: absolute;
display: block;
top: 0%;
left: 0%;
max-width: 100%;
width: 100%;
min-height: 100%;
overflow-x: hidden;
overflow-y: visible;

}

.bw-full-back {

// Position
position: absolute;
top: 0%;
left: 0%;
bottom: 0%;
right: 0%;
// Grid Layout
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
place-items: center;
// Coloring
background-color: $back-color;
color: $white-color;
// Container
.bw-full-back-container {
    // Transform and sizing
    transform: translateY(-25%);
    max-width: 25%;
    margin: 0pt $spacing-unit;
    @include on-mobile {
        max-width: 75%;
    }
    // Title
    .bw-full-back-page-title {
        padding: $spacing-unit 0pt;
        color: $white-color;
        border-bottom: 1px solid $white-color;
    }
    // Content
    .bw-full-back-page-content {
        margin: 2*$spacing-unit 0pt;
    }
    // Link
    .bw-full-back-page-links {
        display: flex;
        flex-direction: row-reverse;
        .bw-full-back-page-link {
            @extend .bw-border-button;
            border-color: $white-color !important;
            padding: $spacing-unit/2 $spacing-unit !important;
            &:hover {
                background-color: $white-color;
                color: black;
            }
        }
    }
}

}

// Hide on desktop, show on mobile .bw-show-on-mobile {

display: none;
@include on-mobile {
    display: inline-block;
}

}

// Sizing .bw-mega { font-size: $mega-font-size; } .bw-large { font-size: $large-font-size; } .bw-medium { font-size: $medium-font-size; } .bw-normal { font-size: $normal-font-size; } .bw-small { font-size: $small-font-size; }

// Basic header with action button availability .bw-header {

// Flex systme
display: flex;
flex-direction: row;
align-items: stretch;
// Spacing and border
margin: $spacing-unit 0pt;
border-bottom: 1px solid;
// Title button
.bw-title {
    flex: 1;
    margin: 0;
    color: inherit;
}
// Action button
.bw-action {
    flex: 0;
    background-color: inherit;
    border: none;
    color: inherit;
    padding: $spacing-unit;
}

}

// Front page header .bw-page-header {

@extend .bw-header;
align-items: center !important;
// Front header action
.bw-action {
    @include cutout;
    padding: $spacing-unit 4*$spacing-unit/3 !important;
    background-color: $back-color !important;
    color: $white-color !important;
}

}

// Content gutters .bw-content-gutters {

display: block;
max-width: $gutters-width;
margin-left: auto;
margin-right: auto;
@include on-tablet {
    max-width: 100%;
}

}

// Grid rows .bw-row {

display: grid;
grid-template-rows: 1fr;
grid-template-columns: repeat(12, 1fr);
grid-column-gap: $spacing-unit;
// Create grid columns
@for $i from 1 through 12 {
    .bw-col-#{$i} {
        grid-column-start: span $i;
        @include on-tablet {
            grid-column-start: span 12;
        };
    }
}

}

// Custom buttons .bw-text-button {

border: none;
background: none;
display: inline-block;
color: inherit;
padding: $spacing-unit;

} .bw-border-button {

@extend .bw-text-button;
border: 1px solid;
border-color: $back-color;

} .bw-cutout-button {

@include cutout;
border: none;
display: inline-block;
transition: box-shadow 0.5s;
&:hover {
    box-shadow: none;
}

} .bw-raised-button {

@include raised;
border: none;
display: inline-block;
transition: box-shadow 0.5s;
&:hover {
    box-shadow: none;
}

} .bw-emph-button {

@extend .bw-cutout-button;

}

// Cutout section (appears as a recessed section that uses the back color) .bw-cutout {

@include block-cutout;
.bw-border-button {
    border-color: $white-color;
}
.bw-emph-button {
    @extend .bw-raised-button;
}

}

// Wraps an element with a horizontal scroll bar .bw-horiz-scroll-wrapper {

display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;

}

// Basic horizontal rule .bw-horiz-rule {

display: block;
width: 100%;
border-bottom: 1px solid;

}

// Thumbnail image .bw-thumbnail {

max-width: 200px;
max-height: 200px;

}