/**
 * SNUC - Funnel Page Styles
 *
*/



/*  Funnel  -
    Diagonal Image Select Options  */
.card-pile {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-flow: column;
}
.card-pile h3 {
    color: white;
}
#FirstSlide,
#SecondSlide,
#ThirdSlide,
#FourthSlide,
#FifthSlide{
    height: 450px;
    width: 100%;
}
.unskew{
    display: flex;
    flex-flow: column;
    justify-content: start;
    height: 100%;
    position: relative;
    left: -3%;
    box-shadow: inset  0 40px 10px 10px #050f21;
    box-sizing: border-box;
    background-repeat: no-repeat ;
    background-size: cover;
}
.unskew h3{
    padding-left: 16%;
    padding-top: 15px;
}
@media screen and (min-width: 1000px){
    .card-pile {
        width: 100%;
        display: flex;
        justify-content: center;
        flex-flow: row;
    }
    .card-pile h3 {
        color: white;
    }
    #FirstSlide,
    #SecondSlide,
    #ThirdSlide,
    #FourthSlide,
    #FifthSlide{
        height: 450px;
        width: 15%;
        transition: width 1s;
        transform: skew(10deg);
        overflow: hidden;
    }
    #FirstSlide:hover,
    #SecondSlide:hover,
    #ThirdSlide:hover,
    #FourthSlide:hover,
    #FifthSlide:hover{
        width: 25%;
    }
    .unskew{
        display: flex;
        flex-flow: column;
        justify-content: start;
        height: 100%;
        transform: skew(-10deg);
        position: relative;
        left: -15%;
        width: 140%;
        box-shadow: inset 0 50px 10px 0 #050f21;
        box-sizing: border-box;
        background-repeat: no-repeat ;
        background-size: cover;
    }
    .unskew h3{
        padding-left: 6%;
    }
}