/*** hratky s css3 ***/
div{
    margin: 3px;
   }
.prvni{ float:left;
       width: 500px;
       background: linear-gradient(45deg, lightgreen, darkgreen); /* 0 zdola, 90 zleva*/
      }
.druhy{ float:left;
       width: 500px;
       background: linear-gradient(180deg, white, lightgreen, darkgreen 200px); /* barevná zarážka pro červenou - tj. v dané vzdálenosti už je čistě daná barva - px i %..*/
      }
.treti{ float:left;
       width: 500px;
       background: radial-gradient(lightgreen, darkgreen);   /*kruhový přechod*/
      }
.ctvrty{float:left;
       width: 500px;
       background: radial-gradient(circle 50px lightgreen, darkgreen);   /*kruhový přechod s určeným průměrem*/
      }
.paty{ float:left;
       width: 500px;
       background: radial-gradient(at top left, lightgreen 30%, darkgreen 50%);   /*kruhový přechod - zarovnání středu a zarážky*/
      }                                               
.sesty{ float:left;
       width: 500px;
       background: radial-gradient(ellipse 150px 50px, lightgreen, darkgreen);   /*elipsový přechod - zarovnání středu a zarážky*/
      }
.sedmy{ float:left;
       width: 500px;
       background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));   /*s použitím průhlednosti barvy */
      }
.osmy{ float:left; 
       width: 500px;
       background: repeating-linear-gradient(red, yellow 10%, green 20%, transparent 25%);   /*opakování+ transparent je taky barva*/
      }
.devaty{ float:left; clear:both;
       width: 200px;
       background: radial-gradient(closest-side at 60% 55%,blue,green,yellow,black);   /*způsob počítání velikosti: closest-side,farthest-side,closest-corner,farthest-corner */
      }
.desaty{ float:left; 
       width: 200px;
       background: radial-gradient(farthest-corner at 60% 55%,blue,green,yellow,black);   /*velikost v procentech se počítá od nejvzdálenějšího rohu*/
      }
.jedenacty{ float:left; 
       width: 500px;
       background: repeating-radial-gradient(red, yellow 10%, green 15%, brown 20%, red 25%);   /*opakování kruhového přechodu*/
      }
.dvanacty{ float:left; 
       width: 500px;
       background: radial-gradient(circle 50px lightgreen, darkgreen);  /*změna pozice*/
      }
      
#bannerclose, #bannerclose p 
      {
       color:#fff;
       font-family: "Helvetica Neue", Arial, sans-serif;
       font-size: 22px
       }
#bannerclose {
              animation: 4s ease 0s normal none 1 running animaclose;
              left: 50%;
              margin-left: -200px;
              margin-top: -200px;
              position: absolute;
              top: 50%;
              z-index: 999999;
              
              border-radius: 200px;
              
              background:rgba(20, 20, 20, 0.8) none repeat scroll 0 0;
              height: 300px;
              padding: 50px;
              text-align: center;
              width: 300px;
              
             }

@keyframes animaclose {
   0% {
    left: -300px;
    transform: rotate(1deg);
      }
    100% {
    left: 50%;
    transform: rotate(360deg);
      }
}
@keyframes animaclose {
    0% {
    left: -300px;
    transform: rotate(1deg);
    }
    100% {
    left: 50%;
    transform: rotate(360deg);
    }
}