#lightboxAnimalPatterns {
    display: none;
}

    #lightboxAnimalPatterns .message-wrapper {
        display: none;
        height: 68vmin;
    }

    #lightboxAnimalPatterns .naveen-wrapper {
        display: none;
    }

    .match-wrapper {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        width: 57vmin;
        position: relative;
    }

        .match-column {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 0 3vmin;
        }

            .match-column:first-of-type {
                margin-left: 0;
            }

            .match-column:last-of-type {
                margin-right: 0;
            }

            .match-skin-texture {
                border-radius: 1vmin;
                width: 10vmin;
                height: 10vmin;
                background-position: center;
                background-size: cover;
                background-repeat: no-repeat;
                cursor: pointer;
                z-index: 10;
            }

                #matchSkinZebra {
                    background-image: url("../img/zebra_fur.jpg");
                }

                #matchSkinElephant {
                    background-image: url("../img/elephant_skin.jpg");
                }

                #matchSkinPeacock {
                    background-image: url("../img/peacock_feathers.jpg");
                }

                #matchSkinSnake {
                    background-image: url("../img/snake_skin.jpg");
                }

            .match-skin-blank {
                background-color: #fff;
                border-radius: 1vmin;
                width: 10vmin;
                height: 10vmin;
                margin: 3vmin 0;
            }

                .match-skin-blank.ui-state-hover {
                    animation-name: pulse;
                    animation-duration: 1s;
                    animation-fill-mode: both;
                    animation-iteration-count: infinite;
                    background-color: #fff;
                    opacity: .9;
                    z-index: 1;
                }

            .match-image {
                height: auto;
            }

                #matchElephant {
                    width: 10vmin;
                }

                #matchSnake {
                    width: 10vmin;
                }

                #matchZebra {
                    width: 10vmin;
                }

                #matchPeacock {
                    width: 8vmin;
                }

@media(max-height: 800px ) and (orientation: landscape) {
    #lightboxAnimalPatterns .message-wrapper {
        height: 80vmin;
    }

    #lightboxAnimalPatterns .message-wrapper h1 {
        margin-top: 0;
    }

    .match-wrapper {
        width: 85vmin;
    }

    .match-skin-texture {
        width: 15vmin;
        height: 15vmin;
    }

    .match-skin-blank {
        width: 15vmin;
        height: 15vmin;
    }

        #matchElephant {
            width: 14vmin;
        }

        #matchSnake {
            width: 14vmin;
        }

        #matchZebra {
            width: 14vmin;
        }

        #matchPeacock {
            width: 12vmin;
        }
}

@media(max-width: 600px) and (orientation: portrait) {
    #lightboxAnimalPatterns .message-wrapper {
        height: 80vmin;
    }

    #lightboxAnimalPatterns .message-wrapper h1 {
        margin-top: 0;
    }

    .match-wrapper {
        width: 85vmin;
    }

    .match-skin-texture {
        width: 15vmin;
        height: 15vmin;
    }

    .match-skin-blank {
        width: 15vmin;
        height: 15vmin;
    }

        #matchElephant {
            width: 14vmin;
        }

        #matchSnake {
            width: 14vmin;
        }

        #matchZebra {
            width: 14vmin;
        }

        #matchPeacock {
            width: 12vmin;
        }
}