<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/* Set the style of the thumbnail overlay items */
.media-box-title{
    color: #fff;
    font-size: 11px;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 28px;
}
.media-box-date{
    color: #F2F2F2;
    font-size: 10px;
}

/* Remove box shadow and border-radius from the media boxes */
.media-box-container{
      -webkit-border-radius: 0px;
           -moz-border-radius: 0px;
                border-radius: 0px;

      -webkit-box-shadow: none;
           -moz-box-shadow: none;
             -o-box-shadow: none;
          -ms-box-shadow: none;
                box-shadow: none;
}

/* thumbnail overlay background */
.thumbnail-overlay{
    background-color: rgba(0,0,0, .40);

    -webkit-transition: background-color 0.2s ease-out;
       -moz-transition: background-color 0.2s ease-out;
         -o-transition: background-color 0.2s ease-out;
            transition: background-color 0.2s ease-out;
}

/* thumbnail overlay background (in the first grid change the initial background) */
#grid .thumbnail-overlay{
    background-color: rgba(0,0,0, 0);
}

/* hover effect on the thumbnail-overlay */
.thumbnail-overlay:hover{
    background-color: rgba(0,0,0, .20) !important;
}

/* hover effect on the image */
.media-box-image img{
    -webkit-transition: transform 0.6s ease-in-out;
       -moz-transition: transform 0.6s ease-in-out;
         -o-transition: transform 0.6s ease-in-out;
        -ms-transition: transform 0.6s ease-in-out;
            transition: transform 0.6s ease-in-out;

    -webkit-transform-origin: bottom left;
       -moz-transform-origin: bottom left;
         -o-transform-origin: bottom left;
        -ms-transform-origin: bottom left;
            transform-origin: bottom left;
}
.media-box-image:hover img{
    -webkit-transform: scale(1.2) translate(-20px);
       -moz-transform: scale(1.2) translate(-20px);
         -o-transform: scale(1.2) translate(-20px);
        -ms-transform: scale(1.2) translate(-20px);
            transform: scale(1.2) translate(-20px);
}

/* Change alignment in grid 2 */
#grid2 .thumbnail-overlay&gt;div.aligment&gt;div.aligment{
    vertical-align: bottom;
    padding-bottom: 40px;
}

.thumbnail-overlay .media-box-title{
    font-size: 16px;
}

.thumbnail-overlay .media-box-date{
    font-style: italic;
    font-size: 12px;
}</pre></body></html>