body {
font-family: 'LibertadThin';
margin: 30px auto;
color: gray;
background-color: white;
}

.slunko_intro {
position: relative;
width:       360px;
text-align: center;
margin:     0 auto 40px auto;
}

h1 {
font-size:     20pt;
text-align:  center;
}

p {
font-size:     15pt;
line-height:   160%;
text-align:  center;
}

a.red {
display: block;
width: 400px;
margin: 20px auto;
padding: 15px;
font-family: 'LibertadExtBd';
font-size: 30px;
line-height: 130%;
text-decoration: none;
color: white;
background-color: #990000;
}

a.red:hover {
color: #990000;
background-color: white;
border: 1px solid #990000;
}


.rotace {
    -webkit-animation: otocse 20s; /* Chrome, Safari, Opera */
    animation: otocse 20s;
    animation-iteration-count: infinite;
}


/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes myfirst {
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

@keyframes otocse {
     0%   {transform:rotate(0deg);}
    50%  {transform:rotate(-360deg);}
    75%  {transform:rotate(0deg);}
    100% {transform:rotate(360deg);}
}

@-webkit-keyframes myfirst {
     0%   {transform:rotate(0deg);}
    50% {transform:rotate(-360deg);}
    75%  {transform:rotate(0deg);}
    100% {transform:rotate(360deg);}
}

/* Standard syntax
@keyframes otocse {
    0%   {transform:rotate(0deg);}
    25%  {transform:rotate(144deg);}
    50%  {transform:rotate(216deg);}
    75%  {transform:rotate(288deg);}
    100% {transform:rotate(360deg);}
}
@keyframes otocse {
    from   {transform:rotate(0deg);}
    to {transform:rotate(-360deg);}
}
*/