/* Copyright (C) Microsoft Corporation. All rights reserved. */
@keyframes thumbnailButtonFadeInKeys
{
    0%
    {
        opacity: 0;
        transform: translateX(300px)
    }
    100%
    {
        opacity: 1;
        transform: translateX(0)
    }
}
@keyframes thumbnailButtonFadeOutKeys
{
    0%
    {
        opacity: 0;
        transform: translateX(-300px)
    }
    100%
    {
        opacity: 1;
        transform: translateX(0)
    }
}
.thumbnailButtonFadeIn
{
    animation-name: thumbnailButtonFadeInKeys;
    animation-direction: normal;
    animation-duration: 1ms;
    animation-timingfunction: cubic-bezier(.16,1,.23,.98);
    animation-fill-mode: forwards
}
.thumbnailButtonFadeOut
{
    animation-name: thumbnailButtonFadeOutKeys;
    animation-direction: normal;
    animation-duration: 1ms;
    animation-timingfunction: cubic-bezier(.16,1,.23,.98);
    animation-fill-mode: forwards
}
.galleryPanelEnter
{
    animation-name: fadeIn;
    animation-duration: 300ms;
    animation-timing-function: cubic-bezier(0,0,1,1);
    animation-fill-mode: both
}
.galleryPanelExit
{
    animation-name: fadeOut;
    animation-duration: 250ms;
    animation-timing-function: cubic-bezier(0,0,1,1);
    animation-fill-mode: both
}
.inlineDetailsFadeIn
{
    animation-name: fadeIn;
    animation-duration: 300ms;
    animation-timing-function: cubic-bezier(.09,.08,.48,1);
    animation-fill-mode: both
}
.inlineDetailsFadeOut
{
    animation-name: fadeOut;
    animation-duration: 300ms;
    animation-timing-function: cubic-bezier(.09,.08,.48,1);
    animation-fill-mode: both
}
.listViewScrollTransition
{
    transition-duration: 300ms;
    transition-property: transform;
    transition-timingfunction: cubic-bezier(.24,1,0,.99)
}
.listViewElementTransition
{
    transition-duration: 300ms;
    transition-property: transform;
    transition-timingfunction: cubic-bezier(.24,1,0,.99)
}
@keyframes detailsActionButtonFadeInKeys
{
    0%
    {
        opacity: 0;
        transform: translateY(100px)
    }
    100%
    {
        opacity: 1;
        transform: translateY(0)
    }
}
@keyframes detailsActionButtonFadeOutKeys
{
    0%
    {
        opacity: 1;
        transform: translateY(0)
    }
    100%
    {
        opacity: 0;
        transform: translateY(100px)
    }
}
.detailsActionButtonFadeIn
{
    animation-name: detailsActionButtonFadeInKeys;
    animation-direction: normal;
    animation-duration: 500ms;
    animation-timingfunction: ease-in;
    animation-fill-mode: forwards
}
.detailsActionButtonFadeOut
{
    animation-name: detailsActionButtonFadeOutKeys;
    animation-direction: normal;
    animation-duration: 500ms;
    animation-timingfunction: ease-out;
    animation-fill-mode: forwards
}
@keyframes detailsActionTextFadeInKeys
{
    0%
    {
        opacity: 0;
        transform: translateY(-100px)
    }
    100%
    {
        opacity: 1;
        transform: translateY(0)
    }
}
@keyframes detailsActionTextFadeOutKeys
{
    0%
    {
        opacity: 1;
        transform: translateY(0)
    }
    100%
    {
        opacity: 0;
        transform: translateY(-100px)
    }
}
.detailsActionTextFadeIn
{
    animation-name: detailsActionTextFadeInKeys;
    animation-direction: normal;
    animation-duration: 500ms;
    animation-timingfunction: ease-in;
    animation-fill-mode: forwards
}
.detailsActionTextFadeOut
{
    animation-name: detailsActionTextFadeOutKeys;
    animation-direction: normal;
    animation-duration: 500ms;
    animation-timingfunction: ease-out;
    animation-fill-mode: forwards
}