/* ==========================================================================
   Author's custom styles
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

body {
    background-color: #000;
}

header,
footer {
    position: relative;
    padding: 5em 20%;
}

header {
    background-color: #fff;
}

section::before,
section::after {
    position: absolute;
    content: '';
    pointer-events: none;
}

section {
    position: relative;
    padding: 1em 20%;
    text-align: center;
}

section h1 {
    margin: 0;
    padding: 0;
    font-size: 2em;
    font-weight: 100;
}

section p,
section a {
    font-size: 1.3em;
    line-height: 1.5;
    text-decoration: none;
}

section span {
    text-transform: lowercase;
}

.nav-frontPage {
    height: 200px;
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
}

.uppercase {
    text-transform: uppercase;
}

.spacing {
    letter-spacing: 1px;
}

/* Borders */

.border-01 { 
  border-width: 0 0 0 1px;
  border-style: solid;
  border-image: linear-gradient(to bottom, rgba(0,0,0,0),rgba(255,255,255,1), rgba(0, 0, 0, 0)) 1 100%;
  -webkit-border-image: linear-gradient(to bottom, rgba(0,0,0,0),rgba(255,255,255,1), rgba(0, 0, 0, 0)) 1 100%;
  -moz-border-image: linear-gradient(to bottom, rgba(0,0,0,0),rgba(255,255,255,1), rgba(0, 0, 0, 0)) 1 100%;
  -ms-border-image: linear-gradient(to bottom, rgba(0,0,0,0),rgba(255,255,255,1), rgba(0, 0, 0, 0)) 1 100%;
  -o-border-image: linear-gradient(to bottom, rgba(0,0,0,0),rgba(255,255,255,1), rgba(0, 0, 0, 0)) 1 100%;
}

.border-01:last-child {
    border-width: 0 1px;
}

/* Double Diagonal line */

.container-fluid {
    overflow: hidden;
}

.ss-dl {
    z-index: 1;
    padding-top: 1em;
}

.ss-dl:nth-child(odd)::before,
.ss-dl:nth-child(odd)::after {
    top: 0;
    left: -25%;
    z-index: -1;
    width: 150%;
    height: 150%;
    background: #fff;
    -webkit-transform: rotate(8deg);
    transform: rotate(8deg);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

.ss-dl:nth-child(odd) h1,
.ss-dl:nth-child(odd) a,
.ss-dl:nth-child(odd) p {
    color: #000;
}

.ss-dl:nth-child(even)::before,
.ss-dl:nth-child(even)::after {
    top: 0;
    left: -25%;
    z-index: -1;
    width: 150%;
    height: 150%;
    background: #000;
    -webkit-transform: rotate(-8deg);
    transform: rotate(-8deg);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

.ss-dl:nth-child(even) h1,
.ss-dl:nth-child(even) a,
.ss-dl:nth-child(even) p {
    color: #fff;
}