.rtl .meta-data{height: 35px; float: right; margin: 10px auto 0; } body:not(.rtl) .meta-data{height: 35px; float: left; margin: 10px auto 0; } .meta-data .posted-by{float: left; margin-right: 25px; } .meta-data .posted-on{float: left; } .meta-data i{margin-right: 4px; color: #4f4e4e; } .rtl .meta-data i{margin-left: 4px; margin-right: 0; } .single-side {position: fixed; top: 50%; width: 100%; z-index: 2; right: 0; } .single-side a{position: absolute; top: 50%; display: block; outline: none; text-align: left; z-index: 1000; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .single-side a.next-post{right: 0; -webkit-perspective-origin: 0% 50%; perspective-origin: 0% 50%; } .single-side a.prev-post{left: 0; -webkit-perspective-origin: 100% 50%; perspective-origin: 100% 50%; } .icon-wrap {display: block; width: 50px; height: 135px; background-color: rgba(0, 0, 0, 0.2); -webkit-transition: background-color 0.3s; transition: background-color 0.3s; } .single-side a i {display: block; margin: 0 auto; padding: 0; text-align: center; color: #ffffff; font-size: 25px; position: relative; top: 50%; -webkit-transition: fill 0.3s; transition: fill 0.3s; -webkit-transform: translateY(-50%); transform: translateY(-50%); fill: #fff; } .single-side .item {position: absolute; top: 0; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .single-side .item{width: 170px; height: 135px; overflow: hidden; margin-bottom: 10px; padding-bottom: 4px; background: #f9f9f9; border: 1px dashed #DEDBDB; word-wrap: break-word; } .single-side .item .item-meta h4{text-align: center; margin: 8px 0 0; padding-bottom: 8px; } .single-side .item .item-meta a{text-align: center; color: #454545; text-decoration: none; } .single-side a.next-post .item{right: 100%; -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); transform: rotateY(-90deg); -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; transform-origin: 100% 50%; } .single-side a.prev-post .item{left: 100%; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; transform-origin: 0% 50%; } .single-side a:hover .item {-webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); transform: rotateY(0deg); transition-delay: 0s; } .post-thumbnail {width: 100%; height: 100%; background-size: cover; } @media screen and (max-width: 768px ) {.single-side {display: none; } }