/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 2015-04-28, 15:18:26
    Author     : adam
*/
.popup
{

    animation-name: fliprun;
    animation-duration: 0.8s;  
    animation-timing-function: ease;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    -webkit-animation-name: fliprun;
    -webkit-animation-duration: 0.8s;  
    -webkit-animation-timing-function: ease;  
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -o-animation-name: fliprun;
    -o-animation-duration: 0.8s;  
    -o-animation-timing-function: ease;  
    -o-animation-iteration-count: 1;
    -o-animation-fill-mode: forwards;    
}

*[animate="hover|300"], .an-hover
{
    transition-duration: 0.3s;
}
*[animate="hover|300"]:hover .an-hover:hover
{
    transition-duration: 0.3s;
}
*[animate="fadein|5000"], .an-fadein
{
    opacity: 1;
    -webkit-animation: fadeIn 5s linear;
    animation: fadeIn 5s linear;
}

*[animate="hover|rotate"]:hover, .an-rotate:hover
{
    -webkit-animation: spin 5s linear infinite;
    animation: spin 5s linear infinite;
}
*[animate="delay-alert"], .animate-delay-alert
{
    -webkit-animation: alert 4s linear 30s;
    animation: alert 4s linear 30s;
}
*[animate="fadeout|5000"], .an-fadeout
{
    opacity: 0;
    -webkit-animation: fadeOut 5s linear;
    animation: fadeOut 5s linear;
}
*[animate="desaturate|300"], .an-desaturate
{
    -webkit-filter: grayscale(100%); filter: grayscale(100%); 
    filter: grayscale(100%); filter: grayscale(100%); 
    transition-duration: 0.3s;
}
*[animate="desaturate|300"]:hover, .an-desaturate
{
    -webkit-filter: grayscale(0); filter: grayscale(0);
    filter: grayscale(0); filter: grayscale(0);
    transition-duration: 0.3s;
}
*[animate="desaturate|half"]
{
    -webkit-filter: grayscale(50%); filter: grayscale(50%); 
    filter: grayscale(50%); filter: grayscale(100%); 
    transition-duration: 0.3s;
}
*[animate="desaturate|half"]:hover
{
    -webkit-filter: grayscale(0); filter: grayscale(0);
    filter: grayscale(0); filter: grayscale(0);
    transition-duration: 0.3s;
}
@-webkit-keyframes fadeIn
{
    form {opacity: 0;}
    to {opacity: 1;}
}
@keyframes fadeIn
{
    form {opacity: 0;}
    to {opacity: 1;}
}
@-webkit-keyframes fadeOut
{
    form {opacity: 0;}
    to {opacity: 1;}
}
@keyframes fadeOut
{
    form {opacity: 1;}
    to {opacity: 0;}
}
@-webkit-keyframes alert
{
    10%,30%,50%,70%,90%{transform: scale(1.1)}
    20%,40%,60%,80%,100%{transform: scale(1.0)}
}
@keyframes alert
{
    10%,30%,50%,70%,90%{transform: scale(1.1)}
    20%,40%,60%,80%,100%{transform: scale(1.0)}
}
@-webkit-keyframes spin
{
    from {transform: rotate(0deg)}
    to {transform: rotate(360deg)}
}
@keyframes spin
{
    from {transform: rotate(0deg)}
    to {transform: rotate(360deg)}
}
@keyframes fliprun {
    0%   {opacity: 0; transform:scale(0)}
    50%   {transform:scale(1.1)}
    100%   {opacity: 1;}
}
@-webkit-keyframes fliprun {
    0%   {opacity: 0; transform:scale(0)}
    50%   {transform:scale(1.1)}
    100%   {opacity: 1;}
}