:root{
    --brand-green:#00bc59;
    /*--old-brand-green:#33cc4d;*/
    --brand-gray:#222222;
    --brand-off-gray:#dadada;
    --pure-black:#000000;
    --pure-white:#ffffff;
}

@keyframes strobe{
    0%   {filter: brightness(6.5);}
    50%  {filter: brightness(7);}
    100% {filter: brightness(6.5);}
}

a, video, button{
    cursor:none !important;
}

a.current:link, span.current{
    text-decoration:underline;
    text-decoration-color:var(--pure-white);
    text-underline-offset: 4px;
    transition:text-decoration-color 0.5s ease;
}

#about-logo-header{
    width:calc(100% - 40px);
    height:calc(100% - 40px);
    position:relative;
    top:0px;
    left:0px;
    padding:20px;
    clip:rect(auto, auto, auto, auto);
    position:absolute;
    left:0px;
    top:0px;
}

#about-logo-header img{
    /*
    left:50%;
    position:fixed;
    top:50%;
    transform:translate(-50%, -50%);
    width:100%;
    */
    position:fixed;
    top:182px;
    left:50%;
    width:auto;
    max-width:calc(100% - 160px);
    max-height:calc(100% - 368px);
    transform:translateX(-50%);
    aspect-ratio:626 / 496;
}

#about-logo-header-green{
    max-width:calc(100% - 160px);
    max-height:calc(100% - 368px);
    left:50%;
    opacity:0;
    position:fixed;
    top:182px;
    transform:translateX(-50%);
    aspect-ratio:626 / 496;
}

#about-splash{
    background-color:var(--brand-gray);
    width: 100%;
    height: 100%;
    position: relative;
    top: 0px;
    left: 0px;
    overflow:hidden;
}

#attribution{
    margin:-20px 0px 0px 0px;
    font-style:oblique;
}

#about-video{
    object-fit:cover;
    left:0%;
    opacity:0.5;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    min-height:100%;
    max-height:100%;
    min-width:100%;
    max-width:100%;
}

#blockquote{
    border-left:4px solid var(--pure-white);
    padding-left:20px;
    margin:0px 40px;
}

#blog-parent{
    padding:40px 0px;
}

body, html{
    background-color:var(--pure-white);
    color:var(--brand-gray);
    cursor:none !important;
    font-family:"Rethink Sans", sans-serif;
    font-size:0px;
    height:100%;
    margin:0px;
    padding:0px;
    width:100%;
}

#careers-splash, #contact-splash, #experiments-splash{
    background-color:var(--brand-gray);
    height:100%;
    left:0px;
    overflow:hidden;
    position:relative;
    top:0px;
    width:100%;
}

#careers-splash .container, #contact-splash .container, #experiments-splash .container{
    bottom:0px;
    left:50%;
    position:absolute;
    transform:translateX(-50%);
}

#careers-title, #contact-title, #experiments-title{
    color:var(--pure-white);
    font-size:48px;
    text-transform:uppercase;
    margin:0px 0px 20px 0px;
}

#careers-video, #contact-video, #experiments-video{
    object-fit:cover;
    position:absolute;
    opacity:0.5;
    top:0px;
    min-height:100%;
    max-height:100%;
    min-width:100%;
    max-width:100%;
}

#closer-look{
    background-color:var(--pure-white);
    color:var(--brand-green);
    display:inline-block;
    font-size:20px;
    font-weight:800;
    margin:20px 0px 0px 0px;
    padding:5px 10px;
    text-decoration:none;
    text-transform:uppercase;
}

#citations{
    display:block;
    text-align:center;
}

.citation{
    display:block;
    font-size:14px;
}


#contact-author, #contact-email{
    width: calc(100% - 24px);
}

.contact-column{
    display:inline-block;
    width:calc(50% - 10px);
}
.contact-column:nth-child(2){
    margin-left:20px;
}

#contact-form{
    overflow:hidden;
    width:75%;
}

#contact-form-title{
    font-size:48px;
    font-weight:800;
    line-height:48px;
    margin:0px 0px 20px 0px;
    text-transform:uppercase;
}

#contact-parent{
    padding:80px 0px;
}

#contact-parent input{
    border:2px solid var(--brand-gray);
    font-size:16px;
    padding:10px;
}

#contact-parent label{
    color:var(--brand-gray);
    display:block;
    font-size:16px;
    margin-bottom:10px;
}

#contact-parent>.container>form>label{
    margin-top:20px;
}

#contact-parent textarea{
    border:2px solid var(--brand-gray);
    font-size:16px;
    margin-bottom:20px;
    padding:10px;
}

#contact-subject, #contact-message{
    margin-top:10px;
    width:calc(100% - 24px);
}

.container{
    margin:auto;
    max-width:calc(100% - 80px);
    padding:0px 40px;
    width:1200px;
}

#cursor{
    border:2px solid var(--pure-white);
    border-radius:50%;
    box-shadow:0 0 8px 2px rgba(255,255,255,0.25);
    height:48px;
    left:0px;
    position:absolute;
    top:0px;
    transform:translate(-50%, -50%);
    width:48px;
}

#cursor::after{
    background-color:var(--pure-white);
    border-radius:50%;
    box-shadow:0 0 8px 2px rgba(255,255,255,0.25);
    content:"";
    height:4px;
    left:50%;
    position:absolute;
    top:50%;
    transform:translate(-50%, -50%);
    width:4px;
}

#cursor-parent{
    cursor:none;
    height:100%;
    left:0px;
    mix-blend-mode:exclusion;
    opacity:0;
    overflow:hidden;
    pointer-events:none;
    position:fixed;
    top:0px;
    width:100%;
    z-index:99;
}

.download-button{
    border:4px solid var(--pure-white);
    color:var(--pure-white);
    display:inline-block;
    font-size:16px;
    font-weight:800;
    margin-bottom:20px;
    padding:20px;
    text-transform:uppercase;
}

.download-button:nth-of-type(n+3){
    margin-left:20px;
}

.experiment{
    background-attachment:fixed;
    background-position:center;
    left:0px;
    min-height:calc(100vh + 112px);
    padding-top:112px;
    position:relative;
    top:0px;
}

.experiment:nth-child(2n){
    text-align:right;
}

.experiment .container{
    left:0px;
    padding-top:0px;
    padding-bottom:80px;
    position:relative;
    top:0px;
    z-index:2;
}

.experiment-description{
    color:var(--pure-white);
    display:block;
    font-size:16px;
    margin-bottom:20px;
}

.experiment-overlay{
    opacity:0.75;
}

.experiment-thumbnails-parent{
    overflow-x:scroll;
    padding-bottom:20px;
    width:100%;
}

.experiment-thumbnails{
    margin-top:20px;
    white-space:nowrap;
}

.experiment-thumbnail{
    border:4px solid var(--pure-white);
    height:128px;
}

.experiment-thumbnail:nth-child(n+2){
    margin-left:20px;
}

.experiment-title{
    color:var(--pure-white);
    font-size:48px;
    margin:0px;
    text-transform:uppercase;
}

.experiment-video{
    aspect-ratio:16/9;
    width:100%;
}

.external-icon{
    color:var(--brand-off-gray);
    font-size:12px;
}

#featured{
    background-color:var(--pure-black);
    display:inline-block;
    height:100%;
    left:0px;
    min-height:580px;
    overflow:hidden;
    position:relative;
    top:0px;
    width:100%;
}


#featured-content{
    left: 0px;
    max-width:520px;
    position: relative;
    text-align:right;
    top: 50%;
    transform: translateY(-50%);
}

#featured-content-parent{
    background-color:var(--brand-green);
    height:calc(100% - 80px);
    opacity:1;
    padding:40px 40px 40px 80px;
    position:absolute;
    right:0px;
    top:0px;
    width:calc(50% - 120px);
    z-index:1;
}

#featured-description p{
    color:var(--pure-white);
    font-size:24px;
}

#featured-description p:first-child{
    margin-top:0px;
    padding-top:0px;
}

#featured-ft{
    color:var(--pure-white);
    font-size:80px;
    font-weight:800;
    right:calc(50% + 95px);
    margin:0px;
    position:absolute;
    top:calc(50% + 4px);
    transform:translateY(-50%);
    transform-origin:center right;
    z-index:2;
}

.featured-platform-icon{
    color:var(--pure-white);
    display:inline-block;
    font-size:32px;
    opacity:0.75;
}
.featured-platform-icon:nth-child(n+2){
    margin:0px 0px 0px 16px;
}

#featured-plus{
    color:var(--pure-white);
    font-size:160px;
    font-weight:800;
    left:50%;
    margin:0px;
    pointer-events:none;
    position:absolute;
    text-shadow:-16px 0px var(--brand-green);
    top:50%;
    transform:translate(-50%, -50%);
    z-index:4;
}

#featured-title{
    color:var(--pure-white);
    font-size:64px;
    margin:0px;
    padding:0px;
    text-transform:uppercase;
}

#featured-video{
    object-fit:cover;
    left:0px;
    opacity:0.5;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    transition:opacity 0.5s ease;
    min-height:100%;
    max-height:100%;
    min-width:100%;
    max-width:100%;
}

#featured-video-parent{
    filter:blur(16px);
    height:100%;
    left:0px;
    overflow:hidden;
    position:relative;
    top:0px;
    transition:filter 0.5s ease;
    width:100%;
}

#featured-video-parent:hover{
    filter:blur(0px);
}

#featured-video-parent:hover #featured-video{
    opacity:0.75;
}

#form-feedback{
    display:block;
    font-size:16px;
    font-style:oblique;
    margin-top:20px;
}

footer{
    background-color:var(--brand-green);
    padding:80px 0px;
}

#footer-contents{
    color:var(--pure-white);
    display:inline-block;
    font-size:12px;
    text-align:center;
}

.gallery-parent img{
    width:100%;
}

#game-cta{
    color:var(--pure-white);
    font-size:20px;
    font-weight:800;
    text-transform:uppercase;
}


#game-date{
    color:var(--pure-white);
    font-size:48px;
    margin-top:0px;
    text-transform:uppercase;
}

#game-pre{
    color:var(--pure-white);
    display:block;
    font-size:16px;
    text-transform:uppercase;
}

#game-splash{
    background-color:var(--brand-gray);
    left:0px;
    min-height:100vh;
    overflow:hidden;
    position:relative;
    top:0px;
}

#game-splash .container{
    bottom:0px;
    left:50%;
    position:absolute;
    transform:translateX(-50%);
}

#game-splash .container>div{
    display:inline-block;
    margin-bottom:40px;
    vertical-align:bottom;
}

#game-splash-center{
    text-align:center;
    width:calc(100% - 200px);
}

#game-splash-left{
}

#game-splash-right{
}

#game-video{
    left:50%;
    opacity:0.75;
    object-fit:cover;
    position:absolute;
    top:50%;
    transform:translate(-50%, -50%);
    min-height:100%;
    max-height:100%;
    min-width:100%;
    max-width:100%;
}

#games{
    padding:80px 0px;
    width:100%;
}

#games-description{
    color:var(--brand-gray);
    display:block;
    font-size:16px;
    margin-bottom:20px;
    text-align:center;
}

#games-title{
    color:var(--brand-gray);
    display:block;
    font-size:48px;
    font-weight:800;
    margin:0px;
    text-align:center;
    text-transform:uppercase;
}

#hamburger-icon{
    color:var(--pure-white);
    font-size:24px;
    transition:color 0.5s ease;
    display:none;
}

.scrolled #hamburger-icon{
    color:var(--brand-green);
}

header{
    display:inline-block;
    height:100%;
    width:100%;
}

header.no-header{
    height:0px;
}

header.short{
    height:600px;
}

#history-title{
    color:var(--pure-white);
    display:block;
    font-size:48px;
    margin:0px;
    padding:40px 0px;
    text-transform:uppercase;
}

#history .container, #intro .container{
    text-align:center;
}

#history{
    background-color:var(--brand-green);
}

#intro{
    clip:rect(auto, auto, auto, auto);
    padding:80px 40px;
    position:relative;
    top:0px;
    width:calc(100% - 80px);
}

#intro-text{
    color:var(--brand-gray);
    display:block;
    margin:40px 0px 0px 0px;
    font-size:16px;
}

#laser-album-cover{
    border:8px solid var(--pure-white);
    height:auto;
    max-width:calc(100% - 16px);
    width:512px;
}

#laser-arrow{
    color:var(--pure-white);
    display:block;
    font-size:32px;
    padding-top:10px;
}

#game-splash-center a:link{
    text-decoration:none;
}

#laser-brief{
    background-color:var(--pure-black);
    background-attachment:local !important;
    background-image:url("/resources/images/games/laser-arena/Lobby.jpg");
    background-size:cover;
    background-position:center !important;
    left:0px;
    position:relative;
    text-align:center;
    top:0px;
}

#laser-brief .container{
    height:100% !important;
}

.laser-color-cyan{
    color:cyan;
}

.laser-color-magenta{
    color:magenta;
}

.laser-color-yellow{
    color:yellow;
}

#laser-extra{
    background-attachment:unset !important;
    background-image:url("/resources/images/games/laser-arena/andreea-tilihoi-m4oi9nwIly4-unsplash.jpg");
    background-position:center !important;
    height:100vh;
}

#laser-extra .container{
    height:100% !important;
    text-align:center;
}

#laser-extra .laser-mode-description{
    padding-bottom:20px;
    width:100%;
}

#laser-extra h2{
    text-transform:uppercase;
}

#laser-long{
    color:var(--pure-white);
    display:block;
    font-size:20px;
    padding-bottom:20px;
}

.laser-mode.right{
    text-align:right;
}

.laser-mode.right .laser-mode-description{
    float:right;
}

.laser-mode.right .laser-mode-number{
    left:unset;
    right:0px;
    transform:translate(50%, -50%);
}

#laser-mode-1{
    background-image:url("/resources/images/games/laser-arena/Target%20Neon%20for%20Locked%20On%20mode.png");
}

#laser-mode-2{
    background-image:url("/resources/images/games/laser-arena/Battery%20Neon%20for%20Neon%20Graffiti%20mode.png");
}

#laser-mode-3{
    background-image:url("/resources/images/games/laser-arena/Gun%20Neon%20for%20Gun%20Runner%20mode.png");
}

#laser-mode-4{
    background-image:url("/resources/images/games/laser-arena/Key%20Neon%20for%20Blind%20and%20Seek%20mode.png");
}

#laser-mode-5{
    background-image:url("/resources/images/games/laser-arena/Emblem%20Neon%20for%20Simon%20Says%20Die%20mode.png");
    left:0px;
    position:relative;
    top:0px;
}

#laser-mode-1, #laser-mode-2, #laser-mode-3, #laser-mode-4, #laser-mode-5, #laser-brief, #laser-extra{
    background-attachment:fixed;
    background-position:center calc(50% + 50px);
    background-size:cover;
    height:calc(100vh + 400px);
    min-height:100%;
    width:100%;
}

#laser-mode-1 .container, #laser-mode-2 .container, #laser-mode-3 .container, #laser-mode-4 .container, #laser-mode-5 .container, #laser-brief .container, #laser-extra .container{
    display:table;
    height:calc(100% - 400px);
    overflow-x:hidden;
}

.laser-mode-content{
    display:table-cell;
    position:relative;
    vertical-align:middle;
}

.laser-mode-gap{
    background:var(--pure-black);
    display:block;
    height:200px;
}

.laser-mode-gradient-bottom{
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    display:block;
    height:200px;
}

.laser-mode-gradient-top{
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    display:block;
    height:200px;
}

.laser-mode-number{
    color:transparent;
    font-family:"Times New Roman", serif;
    font-size:512px;
    left:0px;
    opacity:0.064;
    position:absolute;
    top:50%;
    transform:translate(-50%, -50%);
    -webkit-text-stroke:4px var(--pure-white);
}

.laser-mode-number, .laser-mode-content>div{
    display:table-cell;
    vertical-align:middle;
}

.laser-mode-description{
    color:var(--pure-white);
    display:block;
    font-size:20px;
    left:0px;
    margin-top:20px;
    text-shadow:0px 0px 4px var(--pure-black);
    width:50%;
}

.laser-mode-title{
    color:var(--pure-white);
    display:block;
    font-size:48px;
    font-weight:800;
    line-height:48px;
    margin:0px;
    text-shadow:0px 0px 4px var(--pure-black);
}

.laser-neon{
    background-image:url("/resources/images/games/laser-arena/neon.png");
    background-repeat:repeat-x;
    bottom:0px;
    display:block;
    height:32px;
    left:0px;
    position:absolute;
    transform:translateY(50%);
    width:100%;
    z-index:1;
}

#laser-playlist{
    display:block;
    margin-top:20px;
}

#laser-playlist li{
    color:var(--pure-white);
    font-size:16px;
    font-weight:800;
}

#laser-playlist ol{
    display:inline-block;
    text-align:left;
}

#laser-playlist ol a{
    color:var(--pure-white);
}

#laser-short{
    color:var(--pure-white);
    display:block;
    font-size:48px;
    margin:0px;
    text-transform:uppercase;
}

#laser-trailer{
    width:100%;
}

#last{
    background-image:url("/resources/images/home/x.png");
    background-position:center;
    color:var(--pure-white);
    left:0px;
    padding:80px 0px;
    position:relative;
    text-align:right;
    top:0px;
}

#last-title{
    font-size:48px;
    font-weight:800;
    left:0px;
    margin:0px;
    position:relative;
    text-transform:uppercase;
    top:0px;
}

#last-description{
    font-size:16px;
    left:0px;
    margin-top:10px;
    position:relative;
    top:0px;
}

#logo-small{
    width:100px;
}

#logo-placeholder{
    margin:auto;
}

main a:link{
    color:var(--brand-green);
    text-decoration:none;
}

.member{
    color:var(--brand-gray);
    display:inline-block;
    vertical-align: top;
    width:calc(25% - 15px);
}

.member:nth-child(n-4){
    margin-bottom:20px;
}

.member:nth-child(n+3){
    margin-left:20px;
}

.member:nth-child(5n+1){
    margin-left:0px;
}

.member-contributions{
    font-size:14px;
    font-style:oblique;
}

.member img{
    height:auto;
    width:100%;
}

.member-image-parent{
    aspect-ratio:3/4;
    background-color:var(--brand-gray);
    width:100%;
}

.member-name{
    display:block;
    font-size:24px;
    font-weight:800;
    text-align:center;
    text-transform:uppercase;
}

.member-role{
    display:block;
    font-size:16px;
    text-align:center;
}

.navigation-category{
    border-left: 1px solid var(--brand-green);
    margin: 10px 20px;
}

.navigation-category a{
    padding-left:10px;
}

.navigation-category-title{
    color:var(--brand-gray);
    font-style:oblique;
}

.navigation-hover{
    background-color:var(--pure-white);
    display:none;
    left:0px;
    overflow:visible;
    padding:20px 20px 20px 20px;
    position:absolute;
    text-align:left;
    top:84px;
    white-space:nowrap;
}

.navigation-hover a:link{
    color:var(--brand-green);
    text-decoration:none;
}

.navigation-hover a, .navigation-hover span{
    display:block;
    font-size:16px;
}

.navigation-hover-parent{
    display:inline-block;
    left:0px;
    position:relative;
    top:0px;
    vertical-align:top;
}

.navigation-hover-parent:hover .navigation-hover{
    display:block;
    pointer-events:all;
}

.navigation-link{
    color:var(--pure-white);
    display:inline-block;
    font-size:16px;
    height:24px;
    padding:40px 0px;
    pointer-events:all;
    text-transform:lowercase;
    transition:color 0.5s ease;
}

.navigation-link:link{
    text-decoration:none;
}

.navigation-link:nth-child(1){
   padding-left:20px; 
}

.navigation-link:nth-child(n+2){
    margin-left:20px;
}

#navigation-bottom{
    
}

.navigation-hover a:link{
    color:var(--brand-green);
}

#navigation-bottom .navigation-link:nth-child(n+2){
    margin-left:0px;
}

#navigation-bottom .navigation-hover{
    background-color:var(--brand-green);
    bottom:44px;
    left:unset;
    overflow:visible;
    padding:20px 20px 20px 20px;
    position:absolute;
    right:-20px;
    text-align:right;
    top:unset;
    white-space:nowrap;
}

#navigation-bottom .navigation-hover a:link{
    color:var(--pure-white);
}

#navigation-bottom .navigation-link{
    padding-bottom:20px;
    padding-top:0px;
}

#navigation-bottom .navigation-category{
    border-right: 1px solid var(--pure-white);
    margin: 10px 20px;
}

#navigation-bottom .navigation-category a{
    padding-left:0px;
    padding-right:10px;
}

#navigation-bottom .navigation-category-title{
    color:var(--brand-off-gray);
}

#navigation-top{
    display: inline-block;
    height: 100%;
    text-align: right;
    width: calc(100% - 120px);
}

#navigation-dropdown{
    
}

#news{
    background-color:var(--brand-green);
    color:var(--pure-white);
    padding:80px 0px;
    width:100%;
}

#news-title{
    display:block;
    font-size:48px;
    font-weight:800;
    margin:0px;
    text-align:left;
    text-transform:uppercase;
}

.overlay{
    background-color:var(--pure-black);
    display:inline-block;
    height:100%;
    left:0px;
    opacity:0.8;
    position:absolute;
    top:0px;
    width:100%;
    z-index:0;
}

.position{
    animation:strobe 0.5s ease infinite;
    display:inline-block;
    background-color:var(--brand-gray);
    padding:40px;
    width:calc(50% - 90px);
}

.position:nth-child(2n){
    margin-left:20px;
}

.position:nth-child(n+3){
    margin-top:20px;
}

#positions-loader{
    width:100%;
}

#positions-parent{
    padding:40px 0px;
}

#positions-title{
    color:var(--brand-gray);
    font-size:32px;
    margin:0px;
    text-transform:uppercase;
}

#positions-warning{
    display:block;
    font-size:16px;
    margin:20px 0px;
}

.post:first-child{
    margin-top:60px;
}

.post-date{
    font-size:20px;
}

.post-header{
    width:100%;
}

.post-header img{
    height:auto;
    width:100%;
}

#post-image-1, #post-image-2, #post-image-3{
    aspect-ratio:16/9;
    background-position:center;
    background-size:cover;
    border-radius:8px;
    opacity:1;
    width:100%;
}

.post-preview{
    display:inline-block;
    overflow:hidden;
    width:calc(100%/1 - 0px/3);
}

.post-preview:nth-of-type(n+2){
    margin-left:20px;
}

.post-preview-content{
    color:var(--pure-white);
    display:block;
    font-size:18px;
    padding:10px 0px 10px 0px;
}

.post-preview-content p:first-of-type{
    margin-top:0px;
}

.post-preview-content p:last-of-type{
    margin-bottom:0px;
}

.post-preview-date{
    font-size:16px;
}

.post-preview-header{
    display:inline-block;
    width:100%;
}

.post-preview-header img{
    height:auto;
    width:100%;
}

.post-preview-read-more{
    background-color:var(--pure-white);
    display:inline-block;
    color:var(--brand-green);
    font-size:18px;
    font-weight:800;
    padding:5px 10px;
    text-transform:uppercase;
}

.post-preview-title{
    color:var(--pure-white);
    display:block;
    font-size:32px;
    margin:0px 0px -5px 0px;
    padding:10px 0px 0px 0px;
}

.post-contents p{
    font-size:16px;
}

.post-contents p.photo-credit{
    font-size:14px;
}

.post-tags{
    margin-top:10px;
}

.post-tag{
    background-color:var(--brand-green);
    color:var(--pure-white);
    display:inline-block;
    font-size:14px;
    margin-bottom:10px;
    padding:5px 10px;
}

.post-title{
    font-size:48px;
    font-weight:800;
    margin:0px;
}

#quote{
    background-color:var(--brand-green);
    height:calc(100% - 80px);
    padding:80px 40px;
    width:calc(100% - 80px);
}

#quote span{
    color:var(--pure-white);
    display:inline-block;
    font-size:24px;
}

#quote-left{
    text-align:left;
}

#quote-left, #quote-right{
    display:block !important;
    font-family:fantasy, sans-serif;
    font-size:64px !important;
    line-height:64px;
    opacity:0.5;
}

#quote-right{
    text-align:right;
}

#reel-video{
    height:auto;
    width:100%;
}

#rp{
    width:100px;
}

.scrolled a.current:link, .scrolled span.current{
    text-decoration-color:var(--brand-green);
}

.scrolled#top-navigation-bar-parent{
    background-color:#ffffff;
    pointer-events:all;
}

.scrolled .navigation-link{
    color:var(--brand-green);
}

#send-form{
    background-color:var(--pure-white);
    color:var(--brand-gray);
    cursor:pointer;
    font-weight:800;
    text-transform:uppercase;
}

.separator{
    display:inline-block;
    padding:0px 10px;
}

#site-logo{
    display:inline-block;
    padding:40px 0px;
    pointer-events:all;
}

#site-logo-image{
    color:var(--pure-white);
    height:24px;
    transition:color 0.5s ease;
    width:120px;
}

#smb-ifp{
    background-image:url("/resources/images/backgrounds/super-mario-bros-in-first-person.png");
    background-size:cover;
}

#smb-ifp .overlay{
    background-color:#6f9bff;
    opacity:0.6;
}

#team{
    background-color:var(--pure-white);
    height:calc(100% - 80px);
    padding:80px 40px;
    text-align:center;
    width:calc(100% - 80px);
}

#team-title{
    color:var(--brand-green);
    display:block;
    font-size:48px;
    margin:0px 0px 25px 0px;
    padding:0px;
    text-transform:uppercase;
}

#the-great-breaker{
    background-image:url("/resources/images/backgrounds/the-great-breaker.png");
    background-size:cover;
}

/* width */
#the-great-breaker .experiment-thumbnails-parent::-webkit-scrollbar, #smb-ifp .experiment-thumbnails-parent::-webkit-scrollbar{
  width: 10px;
}

/* Track */
#the-great-breaker .experiment-thumbnails-parent::-webkit-scrollbar-track, #smb-ifp .experiment-thumbnails-parent::-webkit-scrollbar-track{
  background: transparent;
}

/* Handle */
#the-great-breaker .experiment-thumbnails-parent::-webkit-scrollbar-thumb, #smb-ifp .experiment-thumbnails-parent::-webkit-scrollbar-thumb{
  background: var(--pure-white);
}

/* Handle on hover */
#the-great-breaker .experiment-thumbnails-parent::-webkit-scrollbar-thumb:hover, #smb-ifp .experiment-thumbnails-parent::-webkit-scrollbar-thumb:hover{
  background: var(--pure-white);
}

#timeline{
    color:var(--brand-gray);
    display:block;
    margin:0px 0px;
    width:100%;
}

.timeline-date{
    display:block;
    font-size:32px;
    margin:0px;
}
.timeline-description{
    display:block;
    font-size:24px;
    text-transform:uppercase;
}

.timeline-entry{
    padding:40px 0px 40px 0px;
    position:relative;
}

.timeline-entry:nth-of-type(2n-1){
    border-left:2px solid var(--brand-green);
    padding-left:40px;
}

.timeline-entry:nth-of-type(2n-1)::before{
    background-color:var(--pure-white);
    border:2px solid var(--brand-green);
    border-radius:50%;
    content:"";
    display: inline-block;
    height:12px;
    left:-1px;
    position:absolute;
    top:50%;
    transform:translate(-50%, -50%);
    width:12px;
}

.timeline-entry:nth-of-type(2n){
    text-align:right;
    border-right:2px solid var(--brand-green);
    padding-right:40px;
}

.timeline-entry:nth-of-type(2n)::after{
    background-color:var(--pure-white);
    border:2px solid var(--brand-green);
    border-radius:50%;
    content:"";
    display: inline-block;
    height:12px;
    position:absolute;
    right:-1px;
    top:50%;
    transform:translate(50%, -50%);
    width:12px;
}

.timeline-entry:nth-of-type(n-3){
    border-bottom:1px solid var(--brand-green);
}

.timeline-entry:nth-of-type(n+2){
    border-top:1px solid var(--brand-green);
}

.timeline-entry:last-of-type{
    border-bottom:0px;
}

.timeline-line:first-of-type{
    border-bottom:2px solid var(--brand-green);
    border-right:2px solid var(--brand-green);
}

.timeline-line:last-of-type{
    border-left:2px solid var(--brand-green);
    border-top:2px solid var(--brand-green);
}

.timeline-excess, .timeline-line{
    display:inline-block;
    height:80px;
    width:calc(50% - 1px);
}

.timeline-text{
    display:block;
    font-size:16px;
}

#top-navigation-bar-parent{
    left:0px;
    padding:0px 40px;
    pointer-events:none;
    position:fixed;
    text-align:center;
    top:0px;
    transition:background-color 0.5s ease;
    width:calc(100% - 80px);
    z-index:9;
}

#top-navigation-bar{
    display:inline-block;
    max-width:1200px;
    width:100%;
}

#verify{
    margin-bottom:20px;
}

#who{
    left:0px;
    padding:80px 0px;
    position:relative;
    text-align:center;
    top:0px;
}

#who-audio-icon{
    background-color:var(--brand-green);
    border-radius:50%;
    color:var(--pure-white);
    font-size:24px;
    margin:20px 0px 0px 0px;
    padding:8px;
}
#who-description{
    color:var(--brand-gray);
    display:block;
    font-size:16px;
    margin-top:20px;
}

#who-logo{
    height:auto;
    left:0px;
    max-width:512px;
    position:relative;
    top:0px;
    width:100%;
}

#who-pronounce{
    color:var(--brand-gray);
    display:block;
    font-size:16px;
    margin-top:20px;
}

#who-title{
    color:var(--brand-gray);
    display:block;
    font-size:48px;
    font-weight:800;
    left:0px;
    margin:0px 0px 20px 0px;
    position:relative;
    text-transform:uppercase;
    top:0px;
}

.wrapper{
    width:calc(100% - 40px);
    height:calc(100% - 40px);
    position:relative;
    top:0px;
    left:0px;
    padding:20px;
    clip:rect(auto, auto, auto, auto);
}

@media only screen and (max-width: 1600px) {
    #featured-title{
        font-size:56px;
    }
    #featured-description p{
        font-size:20px;
    }
}

@media only screen and (max-width: 1024px) {
    #navigation-top > .navigation-hover-parent{
        display:none;
    }
    #navigation-top > .navigation-link{
        display:none;
    }
    #hamburger-icon{
        display:inline-block;
    }
    .member:nth-of-type(4n + 1){
        margin-left:20px;
    }
    .member{
        width:calc(100%/3 - 14px);
    }
    .member:nth-of-type(3n + 1){
        margin-left:0px;
    }
}

@media only screen and (max-width: 768px) {
    #featured-title{
        font-size:40px;
    }
    #featured-description p{
        font-size:16px;
        display:none;
    }
    .member{
        width:calc(50% - 10px);
    }
    .member:nth-of-type(3n + 1){
        margin-left:20px;
    }
    .member:nth-of-type(odd){
        margin-left:0px;
    }
}

@media only screen and (max-width: 480px) {
    #member{
        width:100%;
        margin-left:0px;
        margin-right:0px;
    }
}