/**
 * CSS for our front-end pages.
 */

/* 
 * Carddeck container
 */
.fw-carddeck {
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    max-width: 100%;
    width: 100%;
}

/*
 * This empty image is used as a desktop on which we place all of the
 * image cards. All of the cards will be positioned 'absolute' so this
 * empty image will preserve the height and width of our display area.
 */
.fw-carddeck-map {
    display: block;
    max-width: 100%;
    width: 100%;
}

/*
 * Use this to display placeholder boxes where cards should be.
 * Useful for visualizing where to align cards.
 */
.fw-carddeck-image-placeholder {
    display: block;
}

/* Each image card is assigned this. */
.fw-carddeck-image {
    box-shadow: 0px 7px 8px rgba(0, 0, 0, 0.30);
    -moz-box-shadow: 0px 7px 8px rgba(0, 0, 0, 0.30);
    -webkit-box-shadow: 0px 7px 8px rgba(0, 0, 0, 0.30);
    display: block;
    height: auto;
    margin: 0;
    max-width: 100%;
    padding: 0;
    position: absolute;
    z-index: 1;
}

/* Place styles common to all cards here */
.fw-carddeck-image { 
}
/*
.fw-carddeck-image { 
    filter: alpha(opacity=1);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
    -webkit-transition: opacity 1.5s;
    transition: opacity 1.5s;
}
*/

/* Start with each image hidden. */
.fw-carddeck-image-hidden {
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
}

/*
 * We may use these in the future to target cards of each size.
 */
.fw-carddeck-image-size-fw_carddeck_large {
}
.fw-carddeck-image-size-fw_carddeck_medium {
}
.fw-carddeck-image-size-fw_carddeck_small {
}
.fw-carddeck-image-size-fw_carddeck_xsmall {
}

@media (min-width: 769px) {

    /*
     * Display the board for the Desktop view.
     */
    .fw-carddeck-map-desktop {
        display: block;
    }
    .fw-carddeck-map-mobile {
        display: none;
    }

    /*
     * Position and size each card.
     */
    .fw-carddeck-image-position-1 {
        left: -2.70%;
        top: 1.85%;
        width: 7.58%;
    }
    .fw-carddeck-image-position-2 {
        left: -2.70%;
        top: 21.20%;
        width: 7.58%;
    }
    .fw-carddeck-image-position-3 {
        left: 6.20%;
        top: 16.10%;
        width: 10.50%;
    }
    .fw-carddeck-image-position-4 {
        left: 0;
        top: 40.00%;
        width: 16.7%;
    }
    .fw-carddeck-image-position-5 {
        left: -2.70%;
        top: 76.80%;
        width: 7.58%;
    }
    .fw-carddeck-image-position-6 {
        left: 6.20%;
        top: 76.60%;
        width: 10.50%;
    }
    .fw-carddeck-image-position-7 {
        left: 18.215%;
        top: 3.90%;
        width: 20.50%;
    }
    .fw-carddeck-image-position-8 {
        left: 18.20%;
        top: 47.1%;
        width: 10.50%;
    }
    .fw-carddeck-image-position-9 {
        left: 19.60%;
        top: 71.40%;
        width: 7.58%;
    }
    .fw-carddeck-image-position-10 {
        left: 30.10%;
        top: 47.30%;
        width: 16.7%;
    }
    .fw-carddeck-image-position-11 {
        left: 40.30%;
        top: 8.7%;
        width: 16.7%;
    }
    .fw-carddeck-image-position-12 {
        left: 48.30%;
        top: 44.70%;
        width: 7.58%;
    }
    .fw-carddeck-image-position-13 {
        left: 48.30%;
        top: 64.10%;
        width: 7.58%;
    }
    .fw-carddeck-image-position-14 {
        left: 58.50%;
        top: 13.50%;
        width: 10.50%;
    }
    .fw-carddeck-image-position-15 {
        left: 70.50%;
        top: 6.40%;
        width: 7.58%;
    }
    .fw-carddeck-image-position-16 {
        left: 70.50%;
        top: 25.50%;
        width: 7.58%;
    }
    .fw-carddeck-image-position-17 {
        left: 57.60%;
        top: 44.50%;
        width: 20.50%;
    }
    .fw-carddeck-image-position-18 {
        left: 79.55%;
        top: 3.70%;
        width: 20.50%;
    }
    .fw-carddeck-image-position-19 {
        left: 79.60%;
        top: 51.50%;
        width: 10.50%;
    }
    .fw-carddeck-image-position-20 {
        left: 79.60%;
        top: 75.80%;
        width: 10.50%;
    }
    .fw-carddeck-image-position-21 {
        left: 91.60%;
        top: 47.50%;
        width: 16.7%;
    }

}

@media (max-width: 768px) {

    /*
     * Display the board for the Mobile view.
     */
    .fw-carddeck-map-desktop {
        display: none;
    }
    .fw-carddeck-map-mobile {
        display: block;
    }

    /*
     * Position and size each card.
     */
    .fw-carddeck-image-position-1,
    .fw-carddeck-image-position-2,
    .fw-carddeck-image-position-3,
    .fw-carddeck-image-position-4,
    .fw-carddeck-image-position-5,
    .fw-carddeck-image-position-6 {
        display: none;
    }
    .fw-carddeck-image-position-7 {
        left: 0.00%;
        top: 2.30%;
        width: 34.20%;
    }
    .fw-carddeck-image-position-8 {
        left: 0.00%;
        top: 51.9%;
        width: 17.29%;
    }
    .fw-carddeck-image-position-9 {
        left: 2.25%;
        top: 79.60%;
        width: 12.60%;
    }
    .fw-carddeck-image-position-10 {
        left: 19.80%;
        top: 51.90%;
        width: 27.80%;
    }
    .fw-carddeck-image-position-11 {
        left: 36.93%;
        top: 7.7%;
        width: 27.80%;
    }
    .fw-carddeck-image-position-12 {
        left: 50.30%;
        top: 49.10%;
        width: 12.60%;
    }
    .fw-carddeck-image-position-13 {
        left: 50.30%;
        top: 71.20%;
        width: 12.60%;
    }
    .fw-carddeck-image-position-14 {
        left: 67.40%;
        top: 13.30%;
        width: 17.29%;
    }
    .fw-carddeck-image-position-15 {
        left: 87.40%;
        top: 5.15%;
        width: 12.60%;
    }
    .fw-carddeck-image-position-16 {
        left: 87.40%;
        top: 27.10%;
        width: 12.60%;
    }
    .fw-carddeck-image-position-17 {
        left: 65.80%;
        top: 48.60%;
        width: 34.20%;
    }
    .fw-carddeck-image-position-18,
    .fw-carddeck-image-position-19,
    .fw-carddeck-image-position-20,
    .fw-carddeck-image-position-21 {
        display: none;
    }

}