
.alpha60 {
	/* Fallback for web browsers that doesn't support RGBa */
	background: rgb(0, 0, 0);
	/* RGBa with 0.6 opacity */
	background: rgba(0, 0, 0, 0.6);
	/* For IE 8*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";

}

.top ul li .pict,
.top ul li .pict2,
.top ul li .pict3,
.top ul li .pict4


{

    /* Animation with transition in Safari and Chrome */
    -webkit-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    -webkit-transition-duration: 15s;
    -moz-transition-duration: 15s;
    -o-transition-duration: 15s;
    transition-duration: 15s; 
    opacity:0;
    visibility: visible; 
    position:absolute;
    margin: auto;
    padding: .5em;
    background-color: transparent;
    border: 1px solid rgba(0,0,0,.5);
    border-radius: 20px;
    /* box shadow effect in Safari and Chrome*/
    -webkit-box-shadow: 3px 3px 2px #07F242, -3px -3px 5px #07F242;
    /* box shadow effect in Firefox*/
    -moz-box-shadow:3px 3px 2px #07F242, -3px -3px 5px #07F242;
    /* box shadow effect in IE*/
    box-shadow: 3px 3px 2px #07F242, -3px -3px 5px #07F242;
    }
.top ul li:hover .pict,
.top ul li:hover .pict2,
.top ul li:hover .pict3,
.top ul li:hover .pict4
.top ul li:hover .pict5
{
    -ms-transform:rotate(720deg); /* IE 9 */
    -moz-transform:rotate(720deg); /* Firefox */
    -webkit-transform:rotate(720deg); /*Safari and Chrome*/
    width: 700px;  
    height: 500px;
    opacity: .8; 
    visibility: visible;
    /* Animation with transition in Firefox */
    -moz-transition: all 2s ease-in;
    }
.top ul li:hover .pict  {margin-left: auto;}
.top ul li:hover .pict2 {margin-right: 200px;}
.top ul li:hover .pict3 {margin-right: 200px;}
.top ul li:hover .pict4 {margin-right: 200px;}
.top ul li:hover .pict5 {margin-right: 200px;}



@-webkit-keyframes spin {
      100% { -webkit-transform: rotate(0deg); }
      50% { -webkit-transform: rotate(0deg); }
      10% { -webkit-transform: rotate(180deg); }
      0% { -webkit-transform: rotate(360deg); }
      
@-webkit-keyframes spun {
      
      10% { -webkit-transform: rotate(360deg); }
      
W3C and Opera:
#div1 {animation-timing-function: cubic-bezier(0,0,1,1;}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
Firefox: 
#div1 {-moz-animation-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-moz-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-moz-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-moz-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-moz-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
Safari and Chrome: 
#div1 {-webkit-animation-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
    }

@-webkit-keyframes slide {
    100% { left: 0; }
}

@keyframes slide {
    100% { left: 0; }
}