<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">.effect .mask {
   opacity: 0;
   overflow:visible;
   /*border:0px solid rgba(0,0,0,0.7);*/
   background: none;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
   box-sizing:border-box;
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
   cursor: pointer;
}
.effect div.info {
    position:relative;
    top:-10px;
    left: 0;
    opacity:0;
   -moz-transform:scale(0,0);
   -webkit-transform:scale(0,0);
   -o-transform:scale(0,0);
   -ms-transform:scale(0,0);
   transform:scale(0,0);
   -webkit-transition: -webkit-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
   -moz-transition: -moz-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
   -o-transition: -o-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
   -ms-transition: -ms-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
   transition: transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
}
@media(min-width:768px){
    .effect:hover .mask {
       opacity: 1;
       /*border:162px solid rgba(0,0,0,0.7);*/
	background: rgba(0,86,121,0.7);
    }
    .effect:hover div.info {
	opacity:1;
	-moz-transform:scale(1,1);
	-webkit-transform:scale(1,1);
	-o-transform:scale(1,1);
	-ms-transform:scale(1,1);
	transform:scale(1,1);
	-moz-transition-delay:0.3s;
	-webkit-transition-delay:0.3s;
	-o-transition-delay:0.3s;
	-ms-transition-delay:0.3s;
	transition-delay:0.3s;
	top: 17%;
	left: 30%;
    }
}

@media(min-width:992px){
    .effect:hover .mask {
       opacity: 1;
       /*border:162px solid rgba(0,0,0,0.7);*/
	background: rgba(0,86,121,0.7);
    }
    .effect:hover div.info {
	opacity:1;
	-moz-transform:scale(1,1);
	-webkit-transform:scale(1,1);
	-o-transform:scale(1,1);
	-ms-transform:scale(1,1);
	transform:scale(1,1);
	-moz-transition-delay:0.3s;
	-webkit-transition-delay:0.3s;
	-o-transition-delay:0.3s;
	-ms-transition-delay:0.3s;
	transition-delay:0.3s;
	top: 21%;
	left: 33%;
    }
}

@media(min-width:1230px){
    .effect:hover .mask {
       opacity: 1;
       /*border:162px solid rgba(0,0,0,0.7);*/
	background: rgba(0,86,121,0.7);
    }
    .effect:hover div.info {
	opacity:1;
	-moz-transform:scale(1,1);
	-webkit-transform:scale(1,1);
	-o-transform:scale(1,1);
	-ms-transform:scale(1,1);
	transform:scale(1,1);
	-moz-transition-delay:0.3s;
	-webkit-transition-delay:0.3s;
	-o-transition-delay:0.3s;
	-ms-transition-delay:0.3s;
	transition-delay:0.3s;
	top: 30%;
	left: 38%;
    } 
}
.view {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
    border-radius: 5px;
    margin: 0 auto;
}
.view .mask, .view .content {
    width: 100%;
    height: auto;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}
@media(min-width:768px){
    .view {
	width: 330px;
	height: 234px;
    }
    .view .mask, .view .content {
	width: 330px;
	height: 234px;
    }
}
@media(min-width:992px){
    .view {
	/*width: 455px;
	height: 323px;*/
	width: 364px;
	height: 259px;
    }
    .view .mask, .view .content {
	/*width: 455px;
	height: 323px;*/
	width: 364px;
	height: 259px;
    }
}
@media(min-width:1230px){
    .view {
	/*width: 560px;
	height: 397px;*/
	width: 459px;
	height: 325px;
    }
    .view .mask, .view .content {
	/*width: 560px;
	height: 397px;*/
	width: 459px;
	height: 325px;
    }
}

.view img {
    display: block;
    position: relative;
    border-radius: 5px;
}
.view div.info {
   background:url(../images/lente.png) center no-repeat;
   display: block;
   text-decoration: none;
   padding:0;
   width:150px;
   height:150px;
}

@media(max-width:767px){
    #last{ display:none;  }    
}</pre></body></html>