.lbwojs {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
z-index:1337;
background:rgba(0, 0, 0, 0.75);
opacity:0;
visibility:hidden;
transition:0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.lbwojs::before {
position:absolute;
top:50%;
left:50%;
z-index:0;
padding:0.5em 1em;
background:black;
opacity:0;
transform:translate(-50%, -50%);
color:white;
text-transform:uppercase;
content:"loading…";
}

.lbwojs .lbwojs-effect {
position:absolute;
top:5%;
left:5%;
right:5%;
bottom:5%;
z-index:1;
opacity:0;
transform:scale(0.8);
}

.lbwojs .lbwojs-img-cont { display:none; }

.lbwojs .lbwojs-img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:center/contain no-repeat;
}

[data-action=lbwojs]:focus ~ .lbwojs {
opacity:1;
visibility:visible;
}

[data-action=lbwojs]:focus ~ .lbwojs::before {
opacity:1;
transition:opacity 0.75s cubic-bezier(0.075, 0.82, 0.165, 1) 0.25s;
}

[data-action=lbwojs]:focus ~ .lbwojs .lbwojs-effect {
opacity:1;
transform:scale(1);
transition:0.75s cubic-bezier(0.075, 0.82, 0.165, 1);
}

[data-action=lbwojs]:focus ~ .lbwojs .lbwojs-img-cont { display:block; }
[data-action=lbwojs]:focus ~ .lbwojs .lbwojs-effect { transform:translateY(0) scale(1) rotateX(0); }
.lbwojs { perspective:2000px; }
.lbwojs .lbwojs-effect { transform:translateY(-10%) scale(0.8) rotateX(15deg); }

td.ettd a {
display:block;
width:360px;
margin:6px 0;
transition:border-color 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

td.ettd a img {
display:block;
width:auto;
max-width:100%;
}

@media (max-width:600px) {
td.ettd a { width:256px; }
}

@media (max-width:500px) {
td.ettd a { width:200px; }
}