.saasprcing-img-holder {
max-width: 280px;
display: inline-block;
vertical-align: top;
margin-left: 16px;
cursor: pointer;
}
.saasprcing-img-holder:nth-child(3n+1) {
margin-left: 0;
}
.saasprcing-img-lightbox {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(43, 43, 43, 0.5);
display: flex;
justify-content: center;
align-items: center;
display: none;
z-index: 99999;
}
.saasprcing-img-lightbox-inner {
position: relative;
}
.saasprcing-lightbox-close {
width: 35px;
height: 30px;
display: flex;
justify-content: center;
flex-direction: column;
position: absolute;
top: -33px;
right: -41px;
opacity: 0;
cursor: pointer;
transform: translateY(-100px);
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-ms-transform: translateY(-100px);
-o-transform: translateY(-100px);
}
.saasprcing-img-lightbox img {
max-width: 500px;
width: 100%;
opacity: 0;
transform: translateY(-100px);
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-ms-transform: translateY(-100px);
-o-transform: translateY(-100px);
}
.saasprcing-lightbox-close .saasprcing-lightbox-bar {
height: 4px;
background: #ffffff;
}
.saasprcing-lightbox-close .saasprcing-lightbox-bar:nth-child(1) {
transform: rotate(45deg);
}
.saasprcing-lightbox-close .saasprcing-lightbox-bar:nth-child(2) {
transform: translateY(-4px) rotate(-45deg);
}
.opened {
display: flex;
}
.opened img, .opened .saasprcing-lightbox-close {
animation: animatepopup 1s ease-in-out .8s;
-webkit-animation: animatepopup .3s ease-in-out forwards;
}
@keyframes animatepopup {
to {
opacity: 1;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
}
}
@media screen and (max-width: 880px) {
.container .saasprcing-img-holder:nth-child(3n+1) {
margin-left: 16px;
}
.saasprcing-img-lightbox-inner {
margin: 40px;
}
}
@media screen and (max-width: 600px) {
.saasprcing-lightbox-close {
width: 20px;
height: 20px;
top: -20px;
right: -22px;
} 
}