/*** hratky s css3 ***/
div{
    margin: 3px;
    float:left;
    width: 500px;
    box-sizing: border-box;

   }
.prvni{  
    background: green;
      }
.prvni:hover{
     background: blue; 
      }      
      
.druhy{
    background: green;
    transition: 900ms;    /* určuje délku přechodu*/
      }
.druhy:hover{
     background: blue; 
      }  
.treti{ 
      background-image:url(obr1.jpg);
      background-repeat: no-repeat;
      background-position: left top;
      transition: 300ms;
      }
.treti:hover{
      background-position: right bottom;
      }       
.ctvrty{                                 /*orámování*/
       background-image: url(obr3.jpg);  
       background-repeat: repeat;
       background-position:  top left;   /*ovlivní, kterým směrem se posune pozadí*/
       border-width: 0px;
       border-color: rgba(255,255,255,.5);
       border-style: solid;
       transition: 300ms;
       height: 200px;
       padding: 20px;       /*stejně velký jako šířka rámečku, aby se nehýbal text*/
      }
.ctvrty:hover{
       border-width: 20px;
       padding:0px;
      }        
.kolecko{ 
      display: inline-block;
  width: 150px;
  height: 150px;
  margin: 0;
  padding: 0;
  background: url(obr1.jpg) center center no-repeat;
  border-radius: 50%;   /* Vytvorime kruhovy tvar */
  box-sizing: border-box;/* Chceme, aby se sirka ramecku nepripocitala k celkove sirce elementu */

  border: 75px rgba(0,0,0,.5) solid;   /* Ramecek zabira celou plochu elementu a je polopruhledny (ano, to muze byt) */
  /* Nastavime jak rychle a jakou casovou funkci ma prohlizec animovat prechod stavu pri zmene vlastnosti */
  transition: .2s ease;                                           
      }
.kolecko:hover{
           /* Po najeti mysi zmensime plochu ramecku */
  border-width: 10px;
           }      
 .paty{                                         /*kombinace dvou efektů*/
      background-image:url(obr1.jpg);
      background-repeat: no-repeat;
      background-position: left top;
      transition: background-position 300ms,
                  background-color 100ms;
      transition-delay: 0s,200ms;             /*zpoždění efektu*/
      }
.paty:hover{
      background-position: right bottom;
      background-color: yellow;
      }                                                    
.sesty{ 
       background: linear-gradient(lightgreen 0%, darkgreen 90%);
       transition: 300ms;
      }
.sesty:hover{ 
       background: linear-gradient(darkgreen 0%, lightgreen 90%)
      }
           
.sedmy{ 
                                    
      }
.osmy{  
    
      }
.devaty{  
      
      }
.desaty{  
      
      } 
.jedenacty{  

      }
.dvanacty{  


      }