/*----------------------------------------------------------------------------
*  Default keyframes & class attributes
*----------------------------------------------------------------------------*/
@keyframes Rotate180 
{
  from 
  {
    transform: (0deg);
    margin-bottom: -3px;
  }
  to 
  {
    margin: 0;
    transform: rotate(-180deg);
  }
}
.Rotate180Deg  { animation: Rotate180 0.20s ease-in-out forwards; }






/*----------------------------------------------------------------------------
*  UI Menu key frames & Classs attributes
*----------------------------------------------------------------------------*/
@keyframes ExtendMenu
{
  from 
  {
    opacity: 0.0;
    margin-top: -5px;
  }
  to 
  {
    opacity: 1.0;
    margin-top: 0;
  }
}
.ExtendMenu { animation: ExtendMenu 0.20s linear forwards; }






/*----------------------------------------------------------------------------
*  UI Hero key frames & Classs attributes
*----------------------------------------------------------------------------*/
@keyframes SetHeroFrameIn
{
  from 
  {
    right: 25px;
    left:  25px;
    opacity: 0.0;
  }
  to 
  {
    right: 0px;
    left:  0px;
    opacity: 1.0;
  }
}
.SetHeroFrameIn { animation: SetHeroFrameIn 0.50s linear forwards; }

@keyframes SetHeroFrameOut
{
  from 
  {
    right: 0px;
    left:  0px;
    opacity: 1.0;
  }
  to 
  {
    right: 50px;
    left:  50px;
    opacity: 0.0;
  }
}
.SetHeroFrameOut { animation: SetHeroFrameOut 0.60s linear forwards; }





/*----------------------------------------------------------------------------
* Keyframes Attributes & Properties
*----------------------------------------------------------------------------*/
@keyframes FadeIn 
{
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeIn 
{ 
  animation: 
  FadeIn ease-in-out 0.200s forwards; 
}
@keyframes FadeOut 
{
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.fadeOut 
{ 
  animation: 
  FadeOut ease-out 0.200s forwards; 
}










/*----------------------------------------------------------------------------
* Extend 7 Retract Active Panel Keyframes And Classes
*----------------------------------------------------------------------------*/
@keyframes ExtendPanel 
{
  0% 
  {
    opacity: 0;
    right: -150px;
  }
  100% 
  {
    right: 0;
    opacity: 1;
  }
}
@keyframes RetractPanel 
{
  0% 
  {
    right: 0;
    opacity: 1;
  }
  100% 
  {
    opacity: 0;
    right: -150px;
  }
}

.ExtendPanel 
{ 
  animation: 
  ExtendPanel ease-in-out 0.200s forwards; 
}
.RetractPanel 
{ 
  animation: 
  RetractPanel ease-out 0.200s forwards; 
}











/*----------------------------------------------------------------------------
* Dialog Frame Animations
*----------------------------------------------------------------------------*/
@keyframes SetFrameIn 
{
  from 
  {
    scale: 0.8;
    opacity: 0.0;
  }
  to 
  {
    scale: 1.0;
    opacity: 1.0;
  }
}
@keyframes SetFrameOut 
{
  from 
  {
    scale: 1.0;
    opacity: 1.0;
  }
  to 
  {
    scale: 0.8;
    opacity: 0.0;
  }
}


.SetFrameIn
{
  animation: SetFrameIn ease-in-out 0.15s forwards;
}
.SetFrameOut
{
  animation: SetFrameOut ease-in-out 0.15s forwards;
}










/*----------------------------------------------------------------------------
* Form Message Block Keyframes & Classes
*----------------------------------------------------------------------------*/
@keyframes FrmMessgeBlcokinAnimation
{
  from 
  {
  
    scale: 0;
    opacity: 0.8;
  }
  to 
  {
    scale: 1.0;
    opacity: 1.0;
  }
}
@keyframes FrmMessgeBlcokOutAnimation 
{
  from 
  {
    scale: 1;
    opacity: 1.0;
  }
  to 
  {
    scale: 0;
    opacity: 0.0;
  }
}
.FrmMessgeBlcokinAnimation
{
  animation: FrmMessgeBlcokinAnimation 0.2s;
}
.FrmMessgeBlcokOutAnimation
{
  animation: FrmMessgeBlcokOutAnimation 0.4s;
}