.rubric .lop{ 
  opacity: 0;
  visibility: hidden; 
     text-decoration:none; 
    width:0px; height:220px; position:absolute;

     top:8px; left:201px;

        margin:-210px 0px 0px 190px
    padding:5px 2px 5px 0px;
    background-color:#F8F8F8;
-webkit-transition: all 1.6s ease;
-moz-transition: all 1.6s ease;
-ms-transition: all 1.6s ease;
-o-transition: all 1.6s ease;
transition: all 1.6s ease;
}

.rubric .lop img{float:left; margin:0px 2px 5px 2px;
     position: relative; 
    opacity: 0;
  visibility: hidden;
    width:0px; height:80px;    
-webkit-transition: all1.4s ease;
-moz-transition: all 1.4s ease;
-o-transition: all 1.4s ease;
-ms-transition: all 1.4s ease;
transition: all 1.4s ease;
}
.rubric .lop .u2 li {font-size:7.5pt; }
.rubric .lop .u2 {float:left; height:80px; width:80px;
 opacity: 0;
  visibility: hidden; padding:0px 2px 4px 6px;
 text-align: left; font-size:11pt; 
}
.rubric .lop .u3 {float:left; width:100%;
 opacity: 0; font-size:11pt; 
  visibility: hidden; 
 text-align: center;
}
.rubric:hover .lop .u3{
   opacity: 1;
   visibility: visible;
   -webkit-transition: all 0.4s ease 1s;
   -moz-transition:  all 0.4s ease 1s;
   -o-transition:  all  0.4s ease 1s;
   -ms-transition:  all 0.4s ease 1s; 
   transition:  all 0.4s ease 1s;}

.rubric:hover .lop .u2 p, li{color: black;}
.rubric:hover .lop .u2{
   opacity: 1;
   visibility: visible;
   -webkit-transition: all 0.4s ease 1s;
   -moz-transition:  all 0.4s ease 1s;
   -o-transition:  all  0.4s ease 1s;
   -ms-transition:  all 0.4s ease 1s; 
   transition:  all 0.4s ease 1s;}

.rubric:hover .lop{width:180px;height:220px; position:absolute;
     top:-2px;
     padding:5px 2px 5px 13px;
       background-color:#F8F8F8;    
   opacity: 1;
   visibility: visible;
      -webkit-border-radius: 12px;
      -moz-border-radius: 12px;
      border-radius: 12px;
      box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.5);
     filter: progid:DXImageTransform.Microsoft.shadow(direction=120, color=#A0A0A0 , strength=10);
  -webkit-transition: all 1.4s ease;
  -moz-transition: all 1.4s ease;
  -o-transition: all1.4s ease;
  -ms-transition: all 1.4s ease;
  transition: all 1.4s ease;

}

.u .uu {float:left; display:block; position: relative;
      width: 205px; 
   -webkit-transition: width 1.6s ease 0.02s ;
   -moz-transition: width 1.6s ease 0.02s ;
   -o-transition: width 1.6s ease 0.02s ;
   -ms-transition: width 1.6s ease 0.02s ;
  transition: width 1.6s ease 0.02s ;}

.u .uu:hover {float:left; 
   display:block; 
   position: relative;
   width: 400px; 
   -webkit-transition: width 1.4s ease;
   -moz-transition: width 1.4s ease;
   -o-transition: width 1.4s ease;
   -ms-transition: width 1.4s ease;
   transition: width 1.4s ease;}


.rubric:hover .lop img{float:left;
     position: relative;
     border:1px solid softgray; 
    width:80px; height:80px;
    opacity: 1; visibility: visible;  
    margin:0px 2px 5px 2px;
    padding:2px 1px 6px 1px;    
    background-color: #F0F0F0 ;
   -webkit-border-radius: 12px;
   -moz-border-radius: 12px;
   border-radius: 12px;
   -webkit-transition: all 1.4s ease 0.1s;
   -moz-transition: all1.4s ease 0.1s;
   -o-transition: all 1.4s ease 0.1s ;
   -ms-transition: all 1.4s ease 0.1s; 
   transition: all 1.4s ease 0.1s;
}