* {box-sizing: border-box;}
#devwall {background-color: #000;}
.dw-grid-background {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 580px;
    background: rgb(0,0,0);
    background: linear-gradient(135deg, rgba(0,0,0,1) 0%, rgba(51,51,51,1) 50%, rgba(0,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.dw-grid-container {
    position: relative;
    width: auto;
    height: auto;
    margin: 0;
    padding: 16px;
    overflow: scroll hidden;
}
.dw-grid-container::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
.dw-grid-container::-webkit-scrollbar-track {
    background: #ccc;
}
.dw-grid-container::-webkit-scrollbar-thumb {
    background: #66b900; /* #76b900; #50ab00; #4ba600;*/
}
.dw-grid-container::-webkit-scrollbar-thumb:hover {
    background: #76b900;
}
.dw-grid-container {
    scrollbar-width: thin;
    scrollbar-color: #76b900 #ccc;
}
.dw-grid-items {
    position: relative;
    height: calc(4 * (145px));
    flex-wrap: wrap;
    flex-direction: column;
    align-content: flex-start;
    justify-content: flex-start;
    text-align: center;
    background: transparent;
}
.dw-grid-item {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: NVIDIA, sans-serif;
    font-weight: bold;
    margin: 0;
    padding: 0;
    background-color: transparent;
    opacity: 0;
}
.tile-short {
    width: 256px;
    height: 120px;
}
.tile-long {
    width: 528px;
    height: 120px;
}
.tile-square {
    width: 256px;
    height: 256px;
}
.flip-card {
    background-color: transparent;
    perspective: 1500px;
}
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform .35s ease-out;
    transition-delay: 0s;
    transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
    transform: rotateX(180deg);
}
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-color: #000;
    transition-delay: .5s;
}
.flip-card-back .content-wrapper h2 {
    padding: 8px !important;
    padding-top: 0 !important;
    font-size: 18px !important;
    line-height: 1.25em !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.flip-card-front {
    background-color: transparent;
    color: black;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.flip-card-front {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.flip-card-front img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}
.flip-card-front.error {
    background-image: #000 url("data:image/svg+xml,%3Csvg id='nvidia-placeholder' xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 256 256' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3Cstyle%3E.nv-bg%7Bstroke-width%3A0px%3Bfill%3A%23000%3B%7D.nvidia-logo%7Bstroke-width%3A0px%3B%7D.nvidia-logo%7Bfill%3A%23111%3B%7D%3C/style%3E%3C/defs%3E%3Csvg id='nvidia-background' viewBox='0 0 256 256' preserveAspectRatio='none'%3E%3Crect class='nv-bg' x='0' y='0' width='256' height='256'/%3E%3C/svg%3E%3Csvg id='nvidia-logo-mark' viewBox='0 0 256 256' preserveAspectRatio='xMidYMid meet'%3E%3Cpath class='nvidia-logo' d='m119.85,119.48v-3.82c.38-.02.75-.05,1.13-.05,10.46-.33,17.31,9,17.31,9,0,0-7.4,10.27-15.33,10.27-1.06,0-2.1-.16-3.09-.49v-11.59c4.08.49,4.9,2.28,7.33,6.36l5.44-4.57s-3.98-5.21-10.67-5.21c-.71-.02-1.41.02-2.12.09m0-12.63v5.7l1.13-.07c14.53-.49,24.03,11.92,24.03,11.92,0,0-10.88,13.24-22.21,13.24-.99,0-1.96-.09-2.92-.26v3.53c.8.09,1.63.16,2.43.16,10.55,0,18.18-5.39,25.58-11.75,1.22.99,6.24,3.37,7.28,4.4-7.02,5.89-23.39,10.62-32.67,10.62-.9,0-1.74-.05-2.59-.14v4.97h40.09v-42.33h-40.15Zm0,27.54v3.02c-9.75-1.74-12.46-11.9-12.46-11.9,0,0,4.69-5.18,12.46-6.03v3.3h-.02c-4.08-.49-7.28,3.32-7.28,3.32,0,0,1.81,6.43,7.3,8.29m-17.31-9.3s5.77-8.53,17.34-9.42v-3.11c-12.81,1.04-23.89,11.87-23.89,11.87,0,0,6.27,18.14,23.86,19.79v-3.3c-12.91-1.6-17.31-15.83-17.31-15.83h0Z'/%3E%3C/svg%3E%3C/svg%3E");
}
.flip-card-back {
    background-color: rgba(0,0,0,0.95);
    color: white;
    transform: rotateX(180deg);
    overflow: hidden;
    transition-delay: .5s;
    cursor:-webkit-grab;
    cursor:grab;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.flip-card-back:active {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}
.tile:active {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}
.tile {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #1a1a1a;
    color: #fff;
    text-align: center;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    transition: transform 0.6s;
    padding: 20px;
}
.tile .content {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.cta-text-link {
    margin-top: -8px;
    padding: 8px;
    padding-bottom: 0;
    border: none;
    color: #76b900;
    cursor: pointer;
    text-decoration: none;
    pointer-events: all;
}
.tile img {
    width: 100%;
    height: 100%;
}
#toggle-buttons {
    position: absolute;
    width: 100vw;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: 15px;
    padding-bottom: 0;
    margin-bottom: 5px;
    background: linear-gradient(to bottom, transparent, black);
    pointer-events: none;
    z-index: 10;
}
.toggle-button, .fullscreen-button {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-right: 10px;
    margin-bottom: 10px;
    pointer-events: all;
}
.icon {
    width: 32px;
    height: 32px;
    fill: white;
}
.button-text-label {
    font-family: NVIDIA, sans-serif;
    font-size: 16px;
    display: inline-block;
    margin-left: 10px;
    margin-right: 0px;
    color: #fff;
}
/* MOBILE PHONE BREAKPOINT */
@media only screen and (max-width: 639px) {
    .dw-grid-background {
        width: 100vw !important;
        height: auto !important;
        min-height: 288px !important;
    }
    .dw-grid-container {
        width: 100vw !important;
        height: calc(var(--vh)) !important;
        min-height: 288px !important;
    }
    #toggle-buttons {
        padding-top: 45px;
        padding-bottom: 0;
        margin-bottom: 5px;
        display: flex;
        justify-content: space-evenly;
    }
    .dw-grid-item, .flip-card-inner {
        transition: none !important;
    }
    .flip-card:hover .flip-card-inner {
        transform: none;
    }
    .gsap-active .dw-grid-item,
    .gsap-active .flip-card-inner {
        transition: none !important;
    }
    .flip-card-back, .flip-card-back:active {
        cursor: default;
    }
}
.dw-grid-item img {
    pointer-events: none;
}
/* TABLET BREAKPOINT */
@media only screen and (min-width: 640px) and (max-width: 1023px) {
    .dw-grid-background {
        width: 100vw !important;
        height: auto !important;
        max-height: 580px !important;
    }
    .dw-grid-container {
        width: 100vw !important;
        height: calc(var(--vh)) !important;
        max-height: 580px !important;
    }
    #toggle-buttons {
        padding-top: 45px;
        padding-bottom: 0;
        margin-bottom: 5px;
        display: flex;
        justify-content: space-evenly;
    }
}