Help. Basic question about code

Site URL: https://www.nickdavid.co.uk/worknew

Hi, I am having some issues figuring out why my code is not actively working on my site. 

It shows up in the CSS preview as working, but when I exit, non of the changes have taken place.

I have tried putting !important on several code to try and force it to work, and I checked if there was any mistype error code.

The only reason I can see now is that I have not named something properly. I am currently using Summary: Wall to feature all the images.  I am trying to have text hover in middle, with gray hover over gradient and white background for the lightbox pop up. 

Please let me know if anyone has a an easy answer to why this is not working. 

Attached is the code and above is the page I am working on

/* display title on hover*/ 
  .sqs-block-summary-v2 .summary-item .summary-title 
  a{ 
  background-color: transparent!important; 
  opacity: 0 !important; 
  color: #fff!important; 
    position: absolute!important;
     left: 0!important;
     right: 0!important;
     top: 40%!important;
     margin-left: auto!important;
      margin-right: auto!important;
  }

  .sqs-block-summary-v2 .summary-item:hover .summary-title 
  a{ 
  background-color: transparent!important; 
  opacity: 4!important; 
  color: #000000!important; 
     position: absolute!important;
     display: block!important;
   text-align: center!important;
 
  }
/*style title font hover for summary wall block*/
.sqs-block-summary-v2 {
.summary-title,
.summary-heading {
font-family: europa !important; 
font-weight: 600 !important;
font-size: 20px !important;
color: #33cccc !important;


@media (max-width: 640px);
  font-size: 18px !important;
;

 } 
}
/*eliminates white space between thumbnails*/
.summary-thumbnail-container,
.summary-title {
margin-bottom: 0 !important;
}





.sqs-lightbox-meta{
 display: none!important;
}


.yui3-lightbox2 .sqs-lightbox-slideshow
{
background-color: 
  white !important;
 opacity: 1 !important;
}