﻿div.rf {
    margin-top:5px;
    height:250px;
    padding:15px 10px;
    background: linear-gradient(#008000, #005000);
    cursor:pointer;
    box-sizing:border-box;
    animation-duration: 15s;
    animation-name: fsh;
    animation-delay: 7.5s;
    animation-iteration-count: infinite;
    animation-direction: forward;
    animation-timing-function:linear;
}
div.rf > div > div {
    color:#fff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .75);
    font-size:25px;
}
div.rf > div:first-child > div:nth-child(2) {
    text-align:center;
    font-size:35px;
    color:#ffff00;
    padding:5px 0px;
}
div.rf > div:first-child > div:nth-child(3) {
    text-align:right;
}
div.rf > div:first-child > div:nth-child(4) {
    position:relative;
}
div.rf > div:first-child > div:nth-child(4) > div {
    position:absolute;
    top:15px;
    left:0px;
}
div.rf > div:first-child > div:nth-child(4) > div > div {
    font-size:18px;
    color:#fff;
}
div.rf > div:first-child > div:nth-child(4) > div > div > span {
    font-size:18px;
    color:#ffff00;
}
div.rf > div:first-child > div:nth-child(4) > div:first-child {
    opacity:1;
    animation-duration: 15s;
    animation-name: rf1;
    animation-delay: 0;
    animation-iteration-count: infinite;
    animation-direction: forward;
    animation-timing-function:linear;}
div.rf > div:first-child > div:nth-child(4) > div:nth-child(2) {
    opacity:0;
    animation-duration: 15s;
    animation-name: rf2;
    animation-delay: 0;
    animation-iteration-count: infinite;
    animation-direction: forward;
    animation-timing-function:linear;
}
div.rf > div:first-child > div:nth-child(4) > div:nth-child(3) {
    opacity:0;
    animation-duration: 15s;
    animation-name: rf3;
    animation-delay: 0;
    animation-iteration-count: infinite;
    animation-direction: forward;
    animation-timing-function:linear;
}
div.rf > div:first-child > div:nth-child(4) > div:nth-child(4) {
    opacity:0;
    animation-duration: 15s;
    animation-name: rf4;
    animation-delay: 0;
    animation-iteration-count: infinite;
    animation-direction: forward;
    animation-timing-function:linear;
}
@keyframes rf1 {
    0% { opacity: 0; }
    5% { opacity: 1; }
    20% { opacity: 1; }
    25% { opacity: 0; }
    100% { opacity:0; }
}
@keyframes rf2 {
    0% { opacity: 0; }
    25% { opacity: 0; }
    30% { opacity: 1; }
    45% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity:0; }
}
@keyframes rf3 {
    0% { opacity: 0; }
    50% { opacity: 0; }
    55% { opacity: 1; }
    70% { opacity: 1; }
    75% { opacity: 0; }
    100% { opacity:0; }
}
@keyframes rf4 {
    0% { opacity: 0; }
    75% { opacity: 0; }
    80% { opacity: 1; }
    95% { opacity: 1; }
    100% { opacity:0; }
}
@keyframes fsh {
    0%      { transform: translate(1px, 1px) rotate(0deg); }
    0.25%   { transform: translate(-1px, -2px) rotate(-1deg); }
    0.5%    { transform: translate(-3px, 0px) rotate(1deg); }
    0.75%   { transform: translate(3px, 2px) rotate(0deg); }
    1%      { transform: translate(1px, -1px) rotate(1deg); }
    1.25%   { transform: translate(-1px, 2px) rotate(-1deg); }
    1.5%    { transform: translate(-3px, 1px) rotate(0deg); }
    1.75%   { transform: translate(3px, 1px) rotate(-1deg); }
    2%      { transform: translate(-1px, -1px) rotate(1deg); }
    2.25%   { transform: translate(1px, 2px) rotate(0deg); }
    2.55%   { transform: translate(0px, 0px) rotate(0deg); }
}