// // Content // //

body {

position: relative;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

}

class*=“container”

{

+ [class*="container"] {
        margin-top: ($section-padding / 2);
}

}

.container-full {

overflow: hidden;

}

.container-fluid {

@include media-breakpoint-up(lg) { max-width: 1370px }
@include media-breakpoint-up(xl) { max-width: 1770px; }

}

.pattern {

&::before,
&::after {
        @include rotate(-45deg);
        position: absolute;
        content: "";
        display: block;
        background: rgba($white, .05);
        border-radius: 10rem;
}

&::before {
        width: 80vw;
        height: 80vw;
        bottom: -40vw;
        left: 25vw;
}

&::after {
        width: 60vw;
        height: 60vw;
        bottom: -30vw;
        left: 80vw;
}

&.pattern-dark {
        &::before,
        &::after {
                background: rgba($dark, .05);
        }
}

> * {
        position: relative;
        z-index: 10;
}

@include media-breakpoint-down(sm) {
        &::before {
                width: 160vw;
                height: 160vw;
                bottom: -80vw;
        }

        &::after {
                width: 120vw;
                height: 120vw;
                bottom: -60vw;
                left: 80vw;
        }
}

}

// // section // body {

> section,
> footer {
        position: relative;
        margin: 0 auto;
        padding: $section-padding 0;
        overflow: hidden;
}

[class*="container"] {
        .row:not(:last-child) {
                margin-bottom: ($section-padding / 2);
        }
}

}

@include media-breakpoint-down(sm) {

body {
        > section,
        > footer {
                padding: ($section-padding / 2) 0;
        }

        [class*="container"] {
                .row:not(:last-child) {
                        margin-bottom: ($section-padding / 3);
                }
        }
}

}

// // layers section // .layers {

position: relative;
margin: 0 auto;

}

.layers-foreground {

position: relative;
z-index: 50;

@include media-breakpoint-down(sm) {
        background: rgba($purple, .5);
}

}

.layers-background {

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 40;

> .container,
> .container-fluid,
> .container-full {
        height: 100%;

        > .row {
                height: 100%;
        }
}

}

.layers-background-overlay {

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: $purple;
z-index: 45;

}

// // split // .split-background {

position: absolute;
top: 0;
bottom: 0;
width: 100%;

.container,
.container-fluid,
.container-full {
        height: 100%;

        .row { height: 100%; }
}

}

@include media-breakpoint-down(sm) {

.split-background {
        position: static;
}

}

// // overlay // .overlay {

&::before {
        position: absolute;
        content: "";
        display: block;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: currentColor;
        opacity: .8;
        z-index: 10;
}

}

// // Section Sizing // section {

&[class*="large"] {
        padding: ($section-padding * 1.5) 0;
}

&[class*="small"] {
        padding: ($section-padding / 1.5) 0;
}

} ////////// // need to add responsive breakpoints here //////////

// // separator //

class*=“separator”

{

border-width: 0;
border-color: $border-color;
border-style: solid;

&[class*="-top"] { border-top-width: $border-width; }
&[class*="-right"] { border-right-width: $border-width; }
&[class*="-bottom"] { border-bottom-width: $border-width; }
&[class*="-left"] { border-left-width: $border-width; }

}

%separator-text-white {

border-color: rgba($white, .1);

}

// // SVG shape section decoration // .section-decorated-top {

padding-top: ($section-padding * 1.5);

}

.section-decorated-bottom {

padding-bottom: ($section-padding * 1.5);

}

.decorated-top {

position: absolute;
top: -$border-width;
right: 0;
bottom: auto;
left: 0;
z-index: 20;
height: ($section-padding / 2);
transform: translateZ(0);

svg {
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
        height: 100%;

        > * {
                fill: currentColor;
                @include shadow();
        }
}

@include media-breakpoint-down(sm) {
        height: 20px;
}

}

.decorated-bottom {

position: absolute;
top: auto;
right: 0;
bottom: -$border-width;
left: 0;
z-index: 20;
height: ($section-padding / 2);
transform: translateZ(0);

svg {
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
        height: 100%;

        > * {
                fill: currentColor;
                @include shadow(20px);
        }
}

@include media-breakpoint-down(sm) {
        height: 20px;
}

}

.decorated-sm {

height: 20px;

}

// // fullscreen section // .viewport {

position: relative;
overflow: hidden;

}

// background decoration .circle {

position: absolute;
top: 40%;
width: 20vw;
height: 20vw;
background: rgba($canalplus, .1);
border-radius: 50%;

}

.square {

position: absolute;
top: 80%;
left: 75vw;
width: 15vw;
height: 15vw;
background: rgba($canalplus, .1);

}

// Responsive // // @include media-breakpoint-up(xl) {

body {
        > section,
        > footer {
                padding: 7.5rem 0;
        }
}

}

@include media-breakpoint-down(md) {

.container,
.container-fluid,
.container-full {
        > .row {
                > *:not(:last-child) {
                        margin-bottom: 1.875rem;
                }
        }
}

}