.gallery { .gallery_content { margin: 0 30px; @media screen and(max-width:768px) { margin: 0 5px; } } .wrapper { padding-bottom: 40px; img { width: 100%; } } } .inline-photo { //border: 1em solid #fff; //border-bottom: 4em solid #fff; //border-radius: .25em; //box-shadow: 1em 1em 2em .25em rgba(0,0,0,.2); //margin: 2em auto; opacity: 0; transform: translateY(0em) rotateZ(0deg); transition: transform 6s 0.25s cubic-bezier(0, 1, 0.3, 1), opacity 0.9s 0.25s ease-out; //max-width: 600px; //width: 90%; will-change: transform, opacity; -webkit-transform: translateY(0em) rotateZ(0deg); -moz-transform: translateY(0em) rotateZ(0deg); -ms-transform: translateY(0em) rotateZ(0deg); -o-transform: translateY(0em) rotateZ(0deg); -webkit-transition: transform 6s 0.25s cubic-bezier(0, 1, 0.3, 1), opacity 0.9s 0.25s ease-out; -moz-transition: transform 6s 0.25s cubic-bezier(0, 1, 0.3, 1), opacity 0.9s 0.25s ease-out; -ms-transition: transform 6s 0.25s cubic-bezier(0, 1, 0.3, 1), opacity 0.9s 0.25s ease-out; -o-transition: transform 6s 0.25s cubic-bezier(0, 1, 0.3, 1), opacity 0.9s 0.25s ease-out; } .inline-photo.is-visible { opacity: 1; transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); }