/* ==== Main Styles */

body, html {
    margin: 0;
    border: 0;
    /* padding: 0; */
    background: #060606;
    color: #fdfdfd;
    font-family: 'HKGroteskRegular', sans-serif;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Lato', sans-serif;
    font-weight: medium;
    font-style: medium;
    font-size: 1em;
    overflow: hidden;
    cursor: none;
}

img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}

/* ==== Blackout */
.blackout.disabled {
    display:none;
}

.blackout {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background: #000;
    cursor: default;
    z-index: 9;
}

.blackout .void {
    margin-top: 20%;
    display: flexbox;
}

.blackout div {
    margin: 2%;
}

.blackout div a {
    text-decoration: none;
    color: #fff;
}

.blackout div a:hover {
    color: rgb(183, 218, 214);
}

.blackoutClose {
    padding: 0.3rem 2rem 0.5rem 2rem;
    text-decoration: none;
    background: transparent;
    border: 2px solid #fdfdfd;
    color: #fdfdfd;
}

/* ==== Menu Tray */
.horizontal-segment img {
    cursor: pointer;
}

.horizontal-segment .void {
    position: fixed;
    width: 40px;
    height: 100vh;
    background: #060606;
    z-index: 7;
    cursor: default;
}

.horizontal-segment .void.active {
    background: #111;
}

.menu-tray {
    position: fixed;
    /* width: 100%; */
    padding: 0.6em;
    background: transparent;
    z-index: 8;
}

.menu-about {
    position: fixed;
    top: 64px;
    left: 0;
    padding: 0.6em;
    background: transparent;
    z-index: 10;
    opacity: 0;
    transition: all 0.2s ease-in;
}

.menu-about:hover {
    opacity: 0.6;
}

.menu-range-slider {
    position: fixed;
    top: 32px;
    left: 0;
    padding: 0.6em;
    background: transparent;
    z-index: 10;
    opacity: 0;
    transition: all 0.2s ease-in;
}

.menu-range-slider:hover {
    opacity: 0.6;
}

/* ==== Navigation */

.menu-nav {
    background: #111;
    position: fixed;
    width: 180px;
    height: 100vh;
    height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    transition: all 0s linear;
    z-index: 1;
    display: none;
    cursor: default;
    /* border-right: 1px solid #fdfdfd; */
}

.menu-nav.active {
    display: inline;
    border: none;
}

.menu-nav .void {
    margin-top: 100px;
    display: flexbox;
}

.menu-nav ul {
    list-style-type: none;
}

.menu-nav li {
    margin: .6rem .4rem 0 0 ;
    padding-bottom: 5%;
    text-align: right;
    font-size: 1em;
    letter-spacing: 0.05em;
    font-weight: 50;
    transition: text-shadow 0.2s;
    color: #d3d3d3;
    text-decoration: none;
    font-weight: lighter;

}

.menu-nav .filter {
    cursor: pointer;
    color: #fdfdfd;
    text-shadow: 0 0 0.01em rgb(101, 226, 248), 0 0 0.8em #32c3d8; 
}

.menu-nav li:hover {
    cursor: pointer;
    text-shadow: 0 0 0.01em #fff, 0 0 0.5em #32c3d8;
    text-shadow: 0 0 0.01em rgb(221, 168, 203), 0 0 0.5em rgb(209, 64, 202);  
    
}

/* ==== Content */

 /* Please see contentTimeLine.css */


/* .content:hover {
    cursor: none;
} */

/* .content-wrapper {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(260px, auto);
    grid-gap: 8px;
    margin: 2.6rem 1rem 2.6rem calc(220px + 1rem);
    width: calc(100% - 2rem - 220px);
    text-align: middle;
    align-items: stretch;
}

.content-wrapper.wide {
    margin: 2.6rem 1rem 2.6rem 1rem;
    width: calc(100% - 2rem);
}

.content-wrapper div {
    background: #999999;
    padding: 10px;
}

.content-wrapper div:nth-child(odd) {
    background: #333333;
}

.content-wrapper div:nth-child(even) {
    background: #666666;
} */

/* ==== Footer */
.footer {
    position: fixed;
    opacity: 0.05;
    bottom: 0;
    right: 0;
    text-align: right;
}