.like-toggle-icon-container.floating { position: fixed; transform: translateX(-100%); padding: 5px 15px; } .like-toggle-icon-container.floating .like-count { display: block; margin: 15px auto; text-align: center; font-size: 24px; font-weight: 600; border-radius: 10px; background-color: #fff; height: 34px; } .like-toggle-icon { width: 35pt; height: 35pt; font-size: 35pt; position: relative; color: gray; cursor: pointer; border: none; background-color: transparent; } .like-toggle-icon:before, .like-toggle-icon:after { position: absolute; top: 0; left: 0; transition: all .3s ease-out; content: ""; font-family: fontawesome; } .like-toggle-icon:hover:before { transform: scale(1.2); } .like-toggle-icon:active:before { transition: none; transform: scale(1); } .like-toggle-icon:after { opacity: 0; } .like-toggle-icon.-checked { color: #A12C2C; } .like-toggle-icon.-checked:before { content: ""; } .like-toggle-icon.-checked:after { content: ""; animation: likeFly .6s ease-in; } @keyframes heartbeat { from { opacity: 1; } to { transform: scale(3); opacity: 0; } } @keyframes likeFly { from { opacity: 1; } to { transform: scale(3) rotate(45deg) translateY(-90px); opacity: 0; } } .blog .blog-item { background-color: #fff; border-radius: 10px; margin-bottom: 40px; } .blog .blog-item .img-blog-entry { width: 100%; border-radius: 10px 10px 0 0; height: 350px; background-position: center; background-size: cover; } .blog .blog-item .blog-content .row div { margin-bottom: 0; } .img-rounded-top { width: 100%; border-radius: 10px 10px 0 0; } .blog .blog-item .blog-content { padding: 40px; } .blog .blog-content .post-title { margin-top: 10px; margin-bottom: 15px; text-align: center; } .blog .blog-content .post-subtitle { line-height: 1.22; letter-spacing: -.022em; margin-bottom: 22px; font-size: 24px; font-weight: 500; } .blog .blog-content .blog-post { text-align: justify; hyphens: auto; font-size: 22px; } .blog .blog-post h1, .blog .blog-post h2, .blog .blog-post h3, .blog .blog-post h4, .blog .blog-post h5, .blog .blog-post h6 { margin-top: 1em; margin-bottom: .5em; } .categories li { display: inline; padding-left: 0; hyphens: auto; } .categories li:first-child { margin-left: 0; } .categories li:after { content: "∙"; } .categories li:last-child:after { content: ""; } .widget { margin-bottom: 30px; } .widget.filled-background { background-color: #FAFAFA; padding: 5px 20px; border-radius: 10px; } .widget.filled-background .media { margin-top: 0; padding: 10px 0; border-bottom: 1px solid rgba(0, 0, 0, .3); transition: transform .2s; } .widget.filled-background .media:hover { transform: scale(1.05); } .widget.filled-background .media:last-child { border: none; } .widget.filled-background .media .post-image { margin-bottom: 10px; } #blog > .container > .row > .col-sm-4.col-sm-push-8 { width: 30%; left: 70%; } #blog > .container > .row > .col-sm-8.col-sm-pull-4 { width: 70%; right: 30%; } .following-post { display: block; height: 108px; overflow: hidden; } .following-post .following-post-image { float: left; background-size: cover; background-position: center; width: 100px; height: 100%; border-radius: 10px; margin-right: 10px; } .following-post.right .following-post-image { float: right; margin-right: 0; margin-left: 10px; } .following-post h4 { max-height: 48px; overflow: hidden; -ms-text-overflow: ellipsis; text-overflow: ellipsis; }