.featured-posts-slider-w { height: 95px; overflow: hidden; padding-top: 0px!important; padding-bottom: 0px!important; background-color: @postBackground; .box-shadow(@postShadow); border-bottom: @postBorder; .featured-posts-slider-i { position: relative; text-align: center; } .post-body { .clearfix; } .featured-posts-label { position: absolute; background-color: @menuDividerBackgroundColor; color: #fff; padding: 2px 4px; font-size: 11px; border-radius: 2px; .rotate(90deg); left: -15px; top: 38px; z-index: 9999; } .featured-posts-slider-controls { position: absolute; right: -5px; top: 20px; a { text-decoration: none; display: block; width: 40px; margin-bottom: 5px; } i { font-size: 20px; } } .featured-post { float: left; height: 75px; margin-top: 10px!important; margin-bottom: 10px!important; figure { position: relative; overflow: hidden; text-align: center; height: 75px; img { border-radius: @borderRadiusBase; } } .post-media-body { float: left; width: 100px; margin-right: 15px; img { max-width: 100%; height: auto; } } .post-content-body { padding-right: 20px; border-right: @postMetaBorder; height: 75px; overflow: hidden; text-align: left; padding-top: 5px; } .post-title { margin: 0px; color: @postTitleColor; font-size: floor(@baseFontSize * 1); line-height: floor(@baseFontSize * 0.9); border-bottom: 1px solid transparent; .transition(all 0.2s ease); &:hover { text-decoration: none; border-color: @postTitleColor; } } .figure-link { display: block; .figure-shade { position: absolute; top: 0; bottom: 0; left: 0; right: 0; .transition(all 0.4s ease); background-color: transparent; } .figure-icon { position: absolute; bottom: -50%; left: 50%; font-size: 24px; margin-bottom: -12px; margin-left: -12px; .transition(all 0.4s ease); color: #fff; } &:hover { .figure-shade { background-color: @postFigureShadeBackgroundColor; } .figure-icon { bottom: 50%; } } } } ul.post-categories { list-style: none; margin: 0px; padding: 0px; .clearfix; margin-top: 5px; padding-top: 8px; border-top: @postMetaBorder; li { margin-right: 3px; margin-bottom: 3px; float: left; } li a { display: block; padding: 2px 4px; background-color: @tagLinkBackground; font-size: 9px; line-height: 12px; color: @tagLinkColor; border: 1px solid @tagLinkBorderColor; border-radius: 2px; &:hover { border-color: darken(@tagLinkBorderColor, 20%); background-color: lighten(@tagLinkBackground, 20%); text-decoration: none; } } } } .featured-carousel-w { position: relative; .featured-posts-label { position: absolute; left: 20px; top: 10px; padding: 5px 10px; .font-headings(); color: #fff; background-color: #FB4E23; font-size: floor(@baseFontSize * 1.4); z-index: 3; } } .featured-carousel-post { position: relative; .figure-link { display: block; .figure-shade { position: absolute; top: 0; bottom: 0; left: 0; right: 0; .transition(all 0.4s ease); background-color: transparent; } .figure-icon { position: absolute; bottom: -50%; left: 50%; font-size: 48px; margin-bottom: -24px; margin-left: -24px; .transition(all 0.4s ease); color: #fff; } } figure { text-align: center; position: relative; overflow: hidden; img { width: inherit; max-width: 100%; height: auto; display: block; margin: 0px auto; } } .post-top-share { .transition(all 0.7s ease); .opacity(0); position: absolute; left: 15px; top: 15px; background-color: rgba(0,0,0,0.8); z-index: 1000; padding: 0px 6px; border-radius: 6px; .box-shadow(0px 1px 4px 0px rgba(0,0,0,0.4)); i.share-activator-icon { vertical-align: middle; line-height: 24px; font-size: 10px; color: #fff; padding-right: 3px; } span.share-activator-label { line-height: 24px; vertical-align: middle; font-size: 10px; text-transform: uppercase; color: #fff; padding-left: 10px; border-left: 1px solid #555; } &:hover { cursor: pointer; i.share-activator-icon { color: #fff; } span.share-activator-label { color: #fff; } } .os_social-head-w { display: none; margin-left: 2px; vertical-align: middle; .os_social { font-size: 10px; .clearfix; img { padding: 0px 4px; width: 25px!important; } a { float: left; display: block; &:hover { .opacity(1); } } } } &.active { span.share-activator-label { display: none; } .os_social-head-w { display: inline-block; } } } .post-content-body { padding: 50px 20px 20px 20px; #gradient > .vertical(@start-color: transparent; @end-color: rgba(0,0,0,0.9)); position: absolute; bottom: 0px; left: 0px; right: 0px; .post-title { color: #fff; font-size: floor(@baseFontSize * 1.2); font-weight: @headingsFontWeight; } } .post-categories { list-style: none; padding: 0px; margin: 0px; line-height: floor(@baseFontSize * 0.80); li { font-size: floor(@baseFontSize * 0.70); display: inline-block; margin-right: 10px; a { color: #eee; text-transform: uppercase; } } } &:hover { .post-top-share { .opacity(1); } .figure-shade { background-color: @postFigureShadeBackgroundColor; } .figure-icon { bottom: 50%; } } } .owl-controls { .owl-prev, .owl-next { cursor: pointer; .icon-w { display: block; font-size: 25px; line-height: 25px; background-color: rgba(0,0,0,0.5); color: #fff; padding: 7px 15px; text-align: center; position: absolute; // top: 50%; // left: 50%; // .transform(translate(-50%, -50%)); top: 50%; .transform(translateY(-50%)); left: 0px; .transition(all 0.3s ease); border-radius: @borderRadiusBase; vertical-align: middle; i { line-height: 25px; vertical-align: top; } } .transition(all 0.3s ease); } .owl-prev { position: absolute; z-index: 2; left: 0px; right: auto; top: 0px; bottom: 0px; width: 80px; // #sun_gradient > .horizontal(@start-color: rgba(255,255,255,0.8); @end-color: rgba(255,255,255,0)); .icon-w { left: 20px; } &:hover { .icon-w { background-color: rgba(0,0,0,0.8); } } } .owl-next { position: absolute; z-index: 2; left: auto; right: 0px; top: 0px; bottom: 0px; width: 80px; // #sun_gradient > .horizontal(@start-color: rgba(255,255,255,0); @end-color: rgba(255,255,255,.8)); .icon-w { top: 50%; .transform(translateY(-50%)); left: auto; right: 20px; } &:hover { .icon-w { background-color: rgba(0,0,0,0.8); } } } }