/* BEGIN SHOW CASE CARDS CSS */

.Card_Showcase {
    height: auto;
    width: 90%;
    min-width: 288px;
    max-width: 800px;
    background-color: #000000;
    box-shadow:  0px 10px 25px 1px #000000;
    transition-duration: .25s;
    position: relative;
    margin: 1.25vh;
}
/*
.Card_Showcase:hover {
    box-shadow:  0px 20px 50px 1px #000000;
    transform: scale(1.01);
    transition-duration: .25s;
}
*/
.Triangle_Top_Left {
    border-right: 100px solid transparent;
    border-top: 100px solid hsl(0, 100%, 50%);
    position: absolute;
    left: 0px;
    top: 0px;
}
.Triangle_Bottom_Right {
    border-bottom: 100px solid  #3b3b3b;
    border-left: 100px solid transparent;
    position: absolute;
    right: 0px;
    bottom: 0px;
}
.Title_Bar {
    width: 100%;
    height: auto;
    text-align: center;
    color: #fff;
    background-color: #000;
    font-family: 'LeagueGothic';
    font-size: 300%;
    padding-top: 15px;
    padding-bottom: 15px;
}
.credits {
    text-align: center;
    padding-left: 12.5%;
    padding-right: 12.5%;
    padding-bottom: 5px;
    padding-top: 5px;
    background-color: #3b3b3b;
}
.credits h1 {
    font-size: 120%;
    font-family: 'Roboto';
    font-weight: normal;
    color: #ffffff;
}
.Player {
    width: 66%;
    height: 288px;
    background-color: #000000;
    float: left;
}
.Blurb {
    background-color: #d2d2d2;
    color: #000000;
    margin-top: 288px;
    text-align: right;
    padding-left: 12.5%;
    padding-right: 12.5%;
    padding-bottom: 15px;
    padding-top: 15px;
    text-align: center;
}
.Blurb h2 {
    font-size: 120%;
    font-family: 'Roboto';
    font-weight: bold;
}

/* Specifies Slider Space */
.Stills_Stack {
    height: 288px;
    width: 34%;
    background-color: #000000;
    float: left;
}
/* Allows Stacked Tracks */
.Stills_Tracks {
    overflow: hidden;
}
.Stills_Track {
    overflow: hidden;
    white-space: nowrap;
    width: fit-content;
    margin-bottom: -4px;
}
/* Builds Slider Cars */
.Stills_Car {
    width: fit-content;
    display: inline-block;
    margin-left: -2px;
    margin-right: -2px;
}
.Stills_Car img{
    height: 144px;
    display: inline-block;
    margin-left: -2px;
    margin-right: -2px;
}
.Stills_Car.Top {
    animation: 15s TopTrack infinite linear;
    
}
.Stills_Car.Bottom {
    animation: 15s BottomTrack infinite linear;
}

/* Animates Slider Cars */
@keyframes TopTrack {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}
@keyframes BottomTrack {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}
/* SMALL SCREEN CONDITIONALS */
@media (max-width: 600PX) {
   .Stills_Stack {
    display: none;
   }
   .Player {
    width: 100%;
    height: 200px;
    background-color: #000000;
    }
    .Blurb {
        margin-top: 200px;
    }
    .Triangle_Top_Left {
        border-right: 50px solid transparent;
        border-top: 50px solid hsl(0, 100%, 50%);
    }
    .Triangle_Bottom_Right {
        border-bottom: 50px solid  #3b3b3b;
        border-left: 50px solid transparent;
        position: absolute;
        right: 0px;
        bottom: 0px;    
    }    
    .Title_Bar {
        font-size: 160%;
    }
    .credits h1 {
        font-size: 90%;
    }
    .Blurb h2 {
        font-size: 90%;
    }
}