#lightboxTallestAnimal {
    display: none;
}

    #lightboxTallestAnimal .message-wrapper {
        display: none;
        height: 68vmin;
        justify-content: flex-start;
    }

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

    .tallest-wrapper {
        position: relative;
    }

        .tallest-row-draggable {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
            margin: 5vmin 0;
        }

            .tallest-draggable {
                width: 10vmin;
                height: 10vmin;
                background-position: center;
                background-size: contain;
                background-repeat: no-repeat;
                cursor: pointer;
                position: relative;
                z-index: 10;
            }

            #tallestZebra {
                background-image: url("../img/zebra.png");
            }

            #tallestKangaroo {
                background-image: url("../img/kangaroo.png");
            }

            #tallestGiraffe {
                background-image: url("../img/giraffe.png");
            }

            #tallestElephant {
                background-image: url("../img/elephant.png");
            }

        .tallest-row-boxes {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
        }

            .tallest-droppable {
                width: 10vmin;
                height: 10vmin;
                background-color: #fff;
                border-radius: 1vmin;
                margin: 2vmin;
            }

                .tallest-droppable.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;
                }

@media(max-height: 800px ) and (orientation: landscape) {
    #lightboxTallestAnimal .message-wrapper {
        margin-bottom: 0;
    }

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

    .tallest-wrapper {
        width: 85vmin;
    }

    .tallest-droppable {
        width: 15vmin;
        height: 15vmin;
    }

    .tallest-draggable {
        width: 15vmin;
        height: 15vmin;
    }
}

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

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

    .tallest-wrapper {
        width: 85vmin;
    }

    .tallest-droppable {
        width: 15vmin;
        height: 15vmin;
    }

    .tallest-draggable {
        width: 15vmin;
        height: 15vmin;
    }
}