/* * Frontend Style Version 3.1.0 */ /******************************Mosaic View layout*************************************/ .ap_wait_loader img { width: 50px; } .clearfix:after, .clearfix:before { content: ""; display: table; clear: both; } .table-outer { display: table; width: 100%; height: 100%; } .table-inner { display: table-cell; vertical-align: middle; } /* ---- Thumb view style ---- */ .thumb-view .thumb-elem { position: relative; overflow: hidden; margin-bottom: 0; } .thumb-view .thumb-elem.hovermove header.thumb-elem-header .featimg img.the-thumb { width: 130%; height: 130%; object-fit: cover; height: auto; position: absolute; top: -15%; left: -15%; max-width: none; } /* ---- End Thumb view style ---- */ .featimg a { display: block; } .grid-small { width: 16.6666%; } .grid-medium { width: 33.3333%; } .grid-large { width: 33.3333%; } .transparent-image { width: 100%; vertical-align: middle; } .grid-hover { position: absolute; display: none; } .grid-small { padding: 5px; } .grid-medium { padding: 3px 5px 5px 5px; } .grid-large { padding: 5px; } #owl-demo .item { margin: 3px; } #owl-demo .item img { display: block; width: 100%; height: auto; } .owl-carousel .owl-item { float: left; } .owl-carousel .owl-wrapper-outer { overflow: hidden; position: relative; width: 100%; } .thumb-elem-header { position: relative; } .image-hover { background: rgba(0, 0, 0, 0.4); padding: 10px 20px; position: absolute; bottom: -100%; left: 0px; width: 100%; height: auto; display: block; line-height: 1; text-align: center; -webkit-transition: all 3s ease 0s; -moz-transition: all 3s ease 0s; transition: all 3s ease 0s; z-index: 9999; } .image-hover:before, .image-hover:after{ display: table; clear: both; content: ""; } .image-hover span{ display: inline-block; line-height: 1; } .image-hover span img{ vertical-align: top; } .grid-medium.masonry_elem .thumb-elem .image-hover, .grid-small.masonry_elem .thumb-elem .image-hover{ font-size: 12px; padding: 6px 15px; } .grid-medium.masonry_elem .thumb-elem .image-hover span.follow, .grid-small.masonry_elem .thumb-elem .image-hover span.follow{ margin-top: 2px; } .masonry_elem .image-hover, .masonry_elem .image-hover:active, .masonry_elem .image-hover:hover, .masonry_elem .image-hover:focus { color: #ffffff; } .owl-item:hover .image-hover, .masonry_elem:hover .image-hover { bottom: 0; cursor: pointer; -webkit-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); transform: scale(1); -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } span.follow { float: left; } span.follow_icon { float: right; } .owl-item:hover .instagram_like_count, .masonry_elem:hover .instagram_like_count { opacity: 1 } span.instagram_like_count span { display: inline-block; font-size: 1em; } span.instagram_like_count { opacity: 0; display: block; position: absolute; top: 50%; width: 100%; text-align: center; margin-top: -14.5px; color: #ffffff; -webkit-transition: all .3s ease 0s; -moz-transition: all .3s ease 0s; transition: all .3s ease 0s; } .instagram_imge_like:before { position: absolute; content: ''; display: block; background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0.85))); background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 100%); background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 100%); background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 100%); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 100%); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#d9ffffff', GradientType=1); width: 35%; top: 30%; height: 1px; left: 5%; } .instagram_imge_like:after { position: absolute; content: ''; display: block; background: -moz-linear-gradient(left, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0.85)), color-stop(100%, rgba(255, 255, 255, 0))); background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 100%); background: -o-linear-gradient(left, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-gradient(left, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(to right, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 100%); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#d9ffffff', endColorstr='#00ffffff', GradientType=1); width: 35%; top: 30%; height: 1px; right: 5%; } .instagram_imge_like { position: relative; } .instagram_imge_like .count { display: block; } .instagram-widget { width: 100%; padding: 8px 0 } .instagram-widget li { width: 31.33%; float: left; margin-right: 3%; margin-bottom: 3%; list-style: none; overflow: hidden; height: 100px } .instagram-widget li:nth-child(3n) { margin-right: 0 } .widget-title-insta { text-align: center; font-family: 'Playfair Display', serif; color: #d28d56; font-size: 20px; line-height: normal; position: relative; } .widget_apif_pro_sidewidget .apif-profile { background: #295988; padding: 10px; } .widget_apif_pro_sidewidget .apif-profile-img { width: 15%; border: 1px solid #ffffff; overflow: hidden; border-radius: 100%; display: inline-block; vertical-align: middle; } .widget_apif_pro_sidewidget .apif-profile-img img { width: 100%; height: 100%; border-radius: 100%; display: inline-block; vertical-align: middle; } .widget_apif_pro_sidewidget .apif-profile-name { font-size: 16px; font-weight: bold; text-transform: uppercase; color: #ffffff; line-height: 18px; text-align: left; display: inline-block; vertical-align: middle; margin-left: 10px; } .widget_apif_pro_sidewidget .apif-profile-follow { background: #F8F8F8; padding: 5px; border-bottom: 1px solid #eeeeee; position: relative; } .widget_apif_pro_sidewidget .apif-profile-follow>div { float: left; width: 25%; text-align: center; font-weight: bold; font-size: 12px; color: #295988; } .widget_apif_pro_sidewidget .apif-profile-follow>div>span { display: block; font-weight: normal; font-size: 10px; color: #999999; text-transform: capitalize; } .widget_apif_pro_sidewidget .apif-profile-follow .follow { position: absolute; top: 0; right: 0; width: 25%; height: 100%; padding: 5px; } .widget_apif_pro_sidewidget .follow-inner { height: 100%; } .widget_apif_pro_sidewidget .apif-profile-follow .follow a { display: inline-block; width: 100%; padding: 5px 0px; background: #275A89; color: #ffffff; border: 1px solid #275A89; text-transform: capitalize; font-weight: bold; font-size: 10px; } .widget_apif_pro_sidewidget .apif-profile-follow .follow a:hover { background: transparent; color: #275A89; border: 1px solid #275A89; } .widget_apif_pro_sidewidget li img { /* transition: transform .2s ease-in-out; -webkit-transition: transform .2s ease-in-out; -moz-transition: transform .2s ease-in-out; transform: scale(1.1),translateZ(0); -webkit-transform: scale(1.1),translateZ(0); -moz-transform: scale(1.1),translateZ(0);*/ max-width: none; width: -webkit-calc(100% + 10px); width: calc(100% + 10px); opacity: 0.7; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } .widget_apif_pro_sidewidget li img:hover { /* transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1);*/ -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 } /*.apif-widget-wrapper span.follow { font-size: 10px; margin-left:-20px; .apif-widget-wrapper .image-hover{ padding:0; } .apif-widget-wrapper .fa-heart-o:before { content: "\f08a"; font-size: 16px; }*/ /* Css start for Instagram pro */ /* Bottom to top */ .apif-bottom-to-top { /* width: 20%;*/ float: left; } .apif-bottom-to-top figure { position: relative; overflow: hidden; } .apif-bottom-to-top figure .apif-image-overlay { bottom: -300px; height: 100%; left: 0; opacity: 0; position: absolute; text-indent: -9999em; transition: all 500ms ease 0s; width: 100%; z-index: 10; } .apif-bottom-to-top:hover figure .apif-image-overlay { opacity: 1; bottom: 0; } .apif-bottom-to-top .apif-image-overlay { background: rgba(255, 255, 255, 0.8); } .apif-bottom-to-top figure .apif-overlay-cont-block { display: block; position: absolute; top: 0; z-index: 999; text-align: center; right: 0; left: 0; bottom: 0; opacity: 0; width: 100%; transition: all 0.9s ease-in-out 0s; } .apif-bottom-to-top:hover figure .apif-overlay-cont-block { opacity: 1; display: block; right: 0; left: 0; bottom: 0; top: 0; } .apif-bottom-to-top figure .profile-image { border-radius: 100%; height: 50px; width: 50px; display: inline-block; margin-top: 25px; } .apif-bottom-to-top figure .profile-image img { width: 100%; overflow: hidden; border-radius: 100%; } .apif-bottom-to-top .ap_insta_like_count { display: inline-block; float: left; } .apif-bottom-to-top .ap_insta_comment_count_wrapper { display: inline-block; float: right; } .apif-bottom-to-top span.apif-ins-link { position: absolute; top: 10px; right: 10px; display: inline-block; } .apif-ins-link { z-index: 99; } .apif-bottom-to-top .coment-like { padding: 20px; display: block; } .apif-bottom-to-top .apif-user-name { font-weight: bold; font-size: 15px; } .apif-bottom-to-top .ap-instagram_imge_like span { display: inline-block; /*float: left;*/ margin-right: 5px; } /* left to right */ .apif-left-to-right { /*width: 20%;*/ float: left; } .apif-left-to-right figure { position: relative; overflow: hidden; } .apif-left-to-right figure .apif-image-overlay { left: -300px; height: 100%; opacity: 0; position: absolute; text-indent: -9999em; transition: all 500ms ease 0s; width: 100%; z-index: 10; top: 0; } .apif-left-to-right:hover figure .apif-image-overlay { opacity: 1; left: 0; } .apif-left-to-right .apif-image-overlay { background: rgba(255, 255, 255, 0.8); } .apif-left-to-right figure .apif-overlay-cont-block { display: block; position: absolute; top: 0; z-index: 999; text-align: center; right: 0; left: 0; bottom: 0; opacity: 0; width: 100%; transition: all 0.9s ease-in-out 0s; } .apif-left-to-right:hover figure .apif-overlay-cont-block { opacity: 1; display: block; right: 0; left: 0; bottom: 0; top: 0; } .apif-left-to-right figure .profile-image { border-radius: 100%; height: 50px; width: 50px; display: inline-block; margin-top: 25px; } .apif-left-to-right figure .profile-image img { width: 100%; overflow: hidden; border-radius: 100%; } .apif-left-to-right .ap_insta_like_count { display: inline-block; float: left; } .apif-left-to-right .ap_insta_comment_count_wrapper { display: inline-block; float: right; } .apif-left-to-right span.apif-ins-link { position: absolute; top: 10px; right: 10px; display: inline-block; } .apif-left-to-right .coment-like { padding: 20px; display: block; } .apif-left-to-right .apif-user-name { font-weight: bold; font-size: 15px; } .apif-left-to-right .ap-instagram_imge_like span { display: inline-block; float: left; margin-right: 5px; } /* top to bottom */ /*.apif-owl-silder figure { min-height: 173px; }*/ .apif-top-to-bottom { /*width: 20%;*/ float: left; width: 100%; } .apif-top-to-bottom figure { position: relative; overflow: hidden; } .apif-top-to-bottom figure .apif-image-overlay { top: -300px; height: 100%; opacity: 0; position: absolute; text-indent: -9999em; transition: all 500ms ease 0s; width: 100%; z-index: 10; left: 0; right: 0; } .apif-top-to-bottom:hover figure .apif-image-overlay { opacity: 1; top: 0; } .apif-top-to-bottom .apif-image-overlay { background: rgba(255, 255, 255, 0.8); } .apif-top-to-bottom figure .apif-overlay-cont-block { display: block; position: absolute; top: 0; z-index: 999; text-align: center; right: 0; left: 0; bottom: 0; opacity: 0; width: 100%; transition: all 0.9s ease-in-out 0s; } .apif-top-to-bottom:hover figure .apif-overlay-cont-block { opacity: 1; display: block; right: 0; left: 0; bottom: 0; top: 0; } figure .profile-image { border-radius: 100%; height: 50px; width: 50px; display: inline-block; margin-top: 0px; } figure .profile-image img { width: 100%; overflow: hidden; border-radius: 100%; } .apif-top-to-bottom .ap_insta_like_count { display: inline-block; float: left; } .apif-top-to-bottom .ap_insta_like_count .ap-instagram_imge_like{ font-size: 13px; line-height: 1; margin: 0 10px 0 0; } .apif-top-to-bottom .ap_insta_comment_count_wrapper { display: inline-block; float: right; line-height: 1; } .apif-middle-content-wrapper{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; text-align: center; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items: center; -webkit-justify-content: center; justify-content: center; } .apif-top-to-bottom .apif-middle-content-wrapper, .apif-bottom-to-top .apif-middle-content-wrapper, .apif-left-to-right .apif-middle-content-wrapper, .apif-right-to-left .apif-middle-content-wrapper{ z-index: 9; height: auto; top: 50%; left: 0; right: 0; width: 130px; margin: -75px auto 0; } .apif-top-to-bottom span.apif-ins-link { position: absolute; top: 10px; right: 10px; display: inline-block; } .apif-top-to-bottom .coment-like { display: block; padding: 20px; margin: 0 auto; font-size: 13px; } .apif-top-to-bottom .apif-user-name { font-weight: bold; font-size: 15px; } .apif-top-to-bottom .ap-instagram_imge_like span, .apif-top-to-bottom .ap_insta_comment_count span{ display: inline-block; /* float: left; */ margin-right: 2px; } .apif-top-to-bottom .apif-middle-content-wrapper .apif-user-name, .apif-bottom-to-top .apif-middle-content-wrapper .apif-user-name, .apif-left-to-right .apif-middle-content-wrapper .apif-user-name, .apif-right-to-left .apif-middle-content-wrapper .apif-user-name{ margin-bottom: 12px; margin-top: 10px; } .apif-top-to-bottom .apif-middle-content-wrapper .apif-user-name a, .apif-bottom-to-top .apif-middle-content-wrapper .apif-user-name a, .apif-left-to-right .apif-middle-content-wrapper .apif-user-name a, .apif-right-to-left .apif-middle-content-wrapper .apif-user-name a{ color: #333; -webkit-transition: all ease 0.35s; -moz-transition: all ease 0.35s; -ms-transition: all ease 0.35s; -o-transition: all ease 0.35s; transition: all ease 0.35s; } .apif-top-to-bottom .apif-middle-content-wrapper .apif-user-name a:hover, .apif-bottom-to-top .apif-middle-content-wrapper .apif-user-name a:hover, .apif-left-to-right .apif-middle-content-wrapper .apif-user-name a:hover, .apif-right-to-left .apif-middle-content-wrapper .apif-user-name a:hover{ color: #999; } .apif-top-to-bottom .apif-inner-content-wrapper .coment-like, .apif-bottom-to-top .apif-inner-content-wrapper .coment-like, .apif-left-to-right .apif-inner-content-wrapper .coment-like, .apif-right-to-left .apif-inner-content-wrapper .coment-like{ margin-bottom: 15px; } .apif-top-to-bottom .apif-inner-content-wrapper .coment-like .ap_insta_like_count, .apif-bottom-to-top .apif-inner-content-wrapper .coment-like .ap_insta_like_count, .apif-left-to-right .apif-inner-content-wrapper .coment-like .ap_insta_like_count, .apif-right-to-left .apif-inner-content-wrapper .coment-like .ap_insta_like_count, .apif-top-to-bottom .apif-inner-content-wrapper .coment-like .ap_insta_comment_count_wrapper, .apif-bottom-to-top .apif-inner-content-wrapper .coment-like .ap_insta_comment_count_wrapper, .apif-left-to-right .apif-inner-content-wrapper .coment-like .ap_insta_comment_count_wrapper, .apif-right-to-left .apif-inner-content-wrapper .coment-like .ap_insta_comment_count_wrapper{ font-weight: 600; color: #333; } .apif-top-to-bottom figure .apif-featimg a.example-image-link, .apif-bottom-to-top figure .apif-featimg a.example-image-link, .apif-left-to-right figure .apif-featimg a.example-image-link, .apif-right-to-left figure .apif-featimg a.example-image-link{ -webkit-transition: all ease 500ms; -moz-transition: all ease 500ms; -ms-transition: all ease 500ms; -o-transition: all ease 500ms; transition: all ease 500ms; } .apif-top-to-bottom:hover figure .apif-featimg a.example-image-link, .apif-bottom-to-top:hover figure .apif-featimg a.example-image-link, .apif-left-to-right:hover figure .apif-featimg a.example-image-link, .apif-right-to-left:hover figure .apif-featimg a.example-image-link{ -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } /* right to left */ .apif-right-to-left { /*width: 20%;*/ float: left; } .apif-right-to-left figure { position: relative; overflow: hidden; } .apif-right-to-left figure .apif-image-overlay { right: -300px; height: 100%; opacity: 0; position: absolute; text-indent: -9999em; transition: all 500ms ease 0s; width: 100%; z-index: 10; top: 0; } .apif-right-to-left:hover figure .apif-image-overlay { opacity: 1; right: 0; } .apif-right-to-left .apif-image-overlay { background: rgba(255, 255, 255, 0.8); } .apif-right-to-left figure .apif-overlay-cont-block { display: block; position: absolute; top: 0; z-index: 999; text-align: center; right: 0; left: 0; bottom: 0; opacity: 0; width: 100%; transition: all 0.9s ease-in-out 0s; } .apif-right-to-left:hover figure .apif-overlay-cont-block { opacity: 1; display: block; right: 0; left: 0; bottom: 0; top: 0; } .apif-right-to-left figure .profile-image { border-radius: 100%; height: 50px; width: 50px; display: inline-block; margin-top: 25px; } .apif-right-to-left figure .profile-image img { width: 100%; overflow: hidden; border-radius: 100%; } .apif-right-to-left .ap_insta_like_count { display: inline-block; float: left; } .apif-right-to-left .ap_insta_comment_count_wrapper { display: inline-block; float: right; } .apif-right-to-left span.apif-ins-link { position: absolute; top: 10px; right: 10px; display: inline-block; z-index: 99; } .apif-right-to-left .coment-like { padding: 20px; display: block; } .apif-right-to-left .apif-user-name { font-weight: bold; font-size: 15px; } .apif-right-to-left .ap-instagram_imge_like span { display: inline-block; float: left; margin-right: 5px; } /* apif-masnry-ui-one */ .apif-masnry-ui-one { /*width: 20%;*/ float: left; } /*.apif-masnry-ui-one figure { position: relative; overflow: hidden; margin: 0; min-height: 270px; } .apif-masnry-ui-one figure .apif-image-overlay { right: -300px; height: 100%; opacity: 0; position: absolute; text-indent: -9999em; transition: all 500ms ease 0s; width: 100%; z-index: 10; top: 0; } .apif-masnry-ui-one:hover figure .apif-image-overlay { opacity: 0.7; right: 0; }*/ /*.apif-masnry-ui-one .apif-image-overlay { background: rgba(141,48,130,4); background: -moz-linear-gradient(top, rgba(141, 48, 130, 8) 0%, rgba(201, 43, 29, 4) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(141, 48, 130, 8)), color-stop(100%, rgba(201, 43, 29, 4))); background: -webkit-linear-gradient(top, rgba(141, 48, 130, 8) 0%, rgba(201, 43, 29, 4) 100%); background: -o-linear-gradient(top, rgba(141, 48, 130, 8) 0%, rgba(201, 43, 29, 4) 100%); background: -ms-linear-gradient(top, rgba(141, 48, 130, 8) 0%, rgba(201, 43, 29, 4) 100%); background: linear-gradient(to bottom, rgba(141, 48, 130, 8) 0%, rgba(201, 43, 29, 4) 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#8d3082', endColorstr='#c92b1d', GradientType=0); } .apif-masnry-ui-one figure .apif-overlay-cont-block { display: block; position: absolute; top: 0; z-index: 999; text-align: center; right: 0; left: 0; bottom: 0; opacity: 0; width: 100%; transition: all 0.9s ease-in-out 0s; } .apif-masnry-ui-one figure .apif-view-n-popup { margin-top: 30px; } .apif-masnry-ui-one figure .apif-view-n-popup i { border: 2px solid #fff; border-radius: 50%; padding: 10px; margin-right: 4px; cursor: pointer; } .apif-masnry-ui-one figure .apif-view-n-popup a i { color: #fff; } .apif-masnry-ui-one:hover figure .apif-overlay-cont-block { opacity: 1; display: block; right: 0; left: 0; bottom: 0; top: 0; color: #fff; }*/ /*.apif-masnry-ui-one:hover figure .apif-overlay-cont-block:before { position: absolute; content: ""; left: 7px; right: 7px; bottom: 7px; top: 7px; border: 2px solid #fff; z-index: -1; } */ .apif-masnry-ui-one figure .profile-image { border-radius: 100%; height: 50px; width: 50px; display: inline-block; /*float: left;*/ border: 3px solid #fff; clear: both; } .apif-masnry-ui-one figure .apif-prof-n-name-wrap { display: block; overflow: hidden; clear: both; margin-top: 30px; padding: 0 30px; } .apif-masnry-ui-one figure .profile-image img { width: 100%; overflow: hidden; border-radius: 100%; } /*.apif-masnry-ui-one .ap_insta_like_count { display: inline-block; float: left; }*/ /*.apif-masnry-ui-one .ap_insta_comment_count_wrapper { display: inline-block; float: right; }*/ /*.apif-masnry-ui-one span.apif-ins-link { position: absolute; top: 10px; right: 0; left: 0; margin: auto; }*/ /*.apif-masnry-ui-one .coment-like { padding: 20px; display: block; }*/ /*.apif-masnry-ui-one .apif-user-name { font-weight: normal; font-size: 15px; float: left; padding: 10px 5% 4px 5%; margin: 0px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 90%; display: block; }*/ /*#apif-shortcode-wrapper .apif-masnry-ui-one .coment-like { display: block !important; font-size: 15px; left: 0; right: 0; position: absolute; bottom: 10px; }*/ /*.apif-masnry-ui-one .ap-instagram_imge_like span { display: inline-block; float: left; margin-right: 5px; } .apif-masnry-ui-one .apif-masonry-block { padding: 0; border: 0 !important; } .apif-masnry-ui-one .apif-masonry-block .apif-fig-content { padding: 0px 15px; } .apif-masnry-ui-one .apif-masonry-block .apif-fig-content .ap_posted_ago { color: #808080; } #apif-shortcode-wrapper .apif-masnry-ui-one .coment-like span p { font-size: 12px; margin: 0; }*/ /* apif-masnry-ui-one end */ /* apif-masnry-ui-two */ .apif-masnry-ui-two .apif-featimg { display: block; width: 100%; text-align: center; overflow: hidden; vertical-align: top; border-radius: 5px; position: relative; } .apif-masnry-ui-two .apif-blue-wrap { background: #2199df; padding: 10px; border-radius: 0; color: #fff; position: relative; } .apif-masnry-ui-two .apif-blue-wrap .apif-featimg{ -webkit-border-radius: 0; border-radius: 0; } .apif-masnry-ui-two .apif-blue-wrap:after { border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 10px solid transparent; border-top: 15px solid #2199df; position: absolute; content: ""; top: 100%; margin-top: -5px; left: 22px; } .apif-masonry-box.apif-masnry-ui-two .apif-masonry-block { border: 0; border: 1px solid #f1f1f1; padding: 0; } .apif-masonry-box.apif-masnry-ui-two { padding: 10px; } .apif-masnry-ui-two .apif-featimg .apif-view-n-popup{ position: absolute; left: 0; right: 0; top: 60%; margin: auto; margin-top: -17px; z-index: 999; color: #fff; opacity: 0; visibility: hidden; -webkit-transition: all ease 0.35s; -moz-transition: all ease 0.35s; -ms-transition: all ease 0.35s; -o-transition: all ease 0.35s; transition: all ease 0.35s; } .apif-masnry-ui-two:hover .apif-featimg .apif-view-n-popup { opacity: 1; visibility: visible; top: 50%; } .apif-masnry-ui-two .apif-featimg .apif-view-n-popup a i { padding: 12px; border: 1px solid #fff; border-radius: 100%; color: #fff; display: inline-block; -webkit-transition: all ease 0.35s; -moz-transition: all ease 0.35s; -ms-transition: all ease 0.35s; -o-transition: all ease 0.35s; transition: all ease 0.35s; line-height: 1; width: unset; height: unset; } .apif-masnry-ui-two .apif-overlay-cont-block .coment-like span.count, .apif-masnry-ui-two .apif-overlay-cont-block .coment-like span.ap_insta_count{ margin-left: 4px; } .apif-masnry-ui-two .apif-featimg .apif-view-n-popup a:hover i{ background: #FFF; color: #000; border-color: #FFF; -webkit-box-shadow: 1px 1px 5px 3px rgba(0,0,0,0.2); box-shadow: 1px 1px 5px 3px rgba(0,0,0,0.2); } .apif-masnry-ui-two .apif-featimg img { margin: -100%; vertical-align: middle; /* to show whats been cut off */ /* position:relative; z-index:;*/ height: 345px; width: 100%; } .apif-masnry-ui-two figure .apif-featimg .apif-image-overlay { left: 0; right: 0; top: 0; /*opacity: 0;*/ position: absolute; visibility: hidden; opacity: 0; content: ""; width: 100%; height: 100%; z-index: 10; background: rgba(0, 0, 0, 0.6); -webkit-transition: all ease 0.35s; -moz-transition: all ease 0.35s; -ms-transition: all ease 0.35s; -o-transition: all ease 0.35s; transition: all ease 0.35s; } .apif-masnry-ui-two:hover figure .apif-featimg .apif-image-overlay { /*opacity: 0.7;*/ visibility: visible; opacity: 1; /*background: rgba(0, 0, 0, 0.4);*/ } .apif-masnry-ui-two figure .apif-featimg a.example-image-link{ -webkit-transition: all ease 0.45s; -moz-transition: all ease 0.45s; -ms-transition: all ease 0.45s; -o-transition: all ease 0.45s; transition: all ease 0.45s; } .apif-masnry-ui-two:hover figure .apif-featimg a.example-image-link{ -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } .apif-masnry-ui-two .apif-featimg .apif-image-overlay { /*background: rgba(141,48,130,4);*/ background: rgba(0, 0, 0, 0.4); } .apif-masnry-ui-two .apif-overlay-cont-block .ap_posted_ago { font-weight: normal; color: #f1f1f1; font-size: 12px; } .apif-masnry-ui-two .apif-overlay-cont-block{ margin-top: 15px; } .apif-masnry-ui-two .apif-image-caption{ margin-top: 10px; font-weight: normal; font-size: 14px; } .apif-image-caption br{ display: none; } .apif-masnry-ui-two .coment-like{ padding: 20px; display: block; } .apif-masnry-ui-two .apif-own-lightbox{ margin-right: 3px; } .apif-masnry-ui-two .apif-ins-link{ margin-left: 3px; } #apif-shortcode-wrapper .apif-masnry-ui-two .coment-like { display: block; width: 100%; padding: 15px 0px 5px; } #apif-shortcode-wrapper .apif-masnry-ui-two .coment-like:before, #apif-shortcode-wrapper .apif-masnry-ui-two .coment-like:after{ clear: both; display: table; content: ""; } #apif-shortcode-wrapper .apif-masnry-ui-two .coment-like span p { margin: 0; font-size: 12px; } .apif-masnry-ui-two span.ap_insta_like_count { display: inline-block; float: left; font-size: 12px; color: #f1f1f1; } .apif-masnry-ui-two span.ap_insta_comment_count_wrapper { display: inline-block; float: right; font-size: 12px; color: #f1f1f1; } .apif-masnry-ui-two .apif-prof-n-name-wrap .profile-image { border-radius: 100%; height: 50px; width: 50px; display: inline-block; float: left; border: 3px solid #a9cde1; clear: both; } .apif-masnry-ui-two .apif-prof-n-name-wrap .profile-image img { width: 100%; overflow: hidden; border-radius: 100%; } .apif-masnry-ui-two .apif-prof-n-name-wrap .apif-user-name { display: inline-block; float: left; padding-left: 10px; margin-top: 12px; font-size: 15px; font-weight: 600; text-transform: lowercase; } .apif-template-masonry_layout2 .apif-masonry-block .apif-fig-content:before, .apif-template-masonry_layout2 .apif-masonry-block .apif-fig-content:after{ display: table; clear: both; content: ""; } .apif-masnry-ui-two .apif-prof-n-name-wrap { display: block; width: 100%; padding: 20px 12px 10px; float: left; } /* apif-masnry-ui-three */ .apif-masnry-ui-three { /*width: 20%;*/ float: left; } .apif-masnry-ui-three .apif-masonry-block { border: 1px solid #ccc; } .apif-masnry-ui-three figure { position: relative; overflow: hidden; } .apif-masnry-ui-three figure .apif-image-overlay { content: ""; top: 0; left: 0; right: 0; height: 100%; position: absolute; text-indent: -9999em; width: 100%; z-index: 10; opacity: 0; visibility: hidden; background: -moz-linear-gradient(top, rgba(141, 48, 130, 0.8) 0%, rgba(201, 43, 29, 0.4) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(141, 48, 130, 0.8)), color-stop(100%, rgba(201, 43, 29, 4))); background: -webkit-linear-gradient(top, rgba(141, 48, 130, 0.8) 0%, rgba(201, 43, 29, 0.4) 100%); background: -o-linear-gradient(top, rgba(141, 48, 130, 0.8) 0%, rgba(201, 43, 29, 0.4) 100%); background: -ms-linear-gradient(top, rgba(141, 48, 130, 0.8) 0%, rgba(201, 43, 29, 0.4) 100%); background: linear-gradient(to bottom, rgba(141, 48, 130, 0.8) 0%, rgba(201, 43, 29, 0.4) 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#8d3082', endColorstr='#c92b1d', GradientType=0); -webkit-transition: all ease 0.2s; -moz-transition: all ease 0.2s; -ms-transition: all ease 0.2s; -o-transition: all ease 0.2s; transition: all ease 0.2s; } .apif-masnry-ui-three:hover figure .apif-image-overlay { opacity: 1; visibility: visible; } .apif-masnry-ui-three .apif-image-overlay { /*background: rgba(141,48,130,4);*/ } .apif-masnry-ui-three figure .apif-overlay-cont-block { display: block; position: absolute; top: 0; z-index: 999; text-align: center; right: 0; left: 0; bottom: 0; opacity: 0; width: 100%; transition: all 0.9s ease-in-out 0s; } .apif-masnry-ui-three figure .apif-view-n-popup{ position: absolute; z-index: 10; top: 50%; margin: auto; margin-top: -17px; height: 34px; width: 100%; } .apif-masnry-ui-three figure .apif-view-n-popup:before, .apif-masnry-ui-three figure .apif-view-n-popup:after{ display: table; clear: both; content: ""; } .apif-masnry-ui-three figure .apif-view-n-popup a{ display: inline-block; width: 50%; float: left; visibility: hidden; opacity: 0; -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); -o-transform: translateY(25px); transform: translateY(25px); -webkit-transition: all ease 0.35s; -moz-transition: all ease 0.35s; -ms-transition: all ease 0.35s; -o-transition: all ease 0.35s; transition: all ease 0.35s; } .apif-masnry-ui-three figure .apif-view-n-popup a:first-of-type{ text-align: right; padding-right: 5px; -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -ms-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s; } .apif-masnry-ui-three figure .apif-view-n-popup a:last-of-type{ text-align: left; padding-left: 5px; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -ms-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } .apif-masnry-ui-three:hover figure .apif-view-n-popup a{ visibility: visible; opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .apif-masnry-ui-three figure .apif-view-n-popup i { border: 2px solid #fff; border-radius: 50%; height: 45px; line-height: 43px; width: 45px; font-weight: 400; text-align: center; cursor: pointer; -webkit-transition: all ease 0.35s; -moz-transition: all ease 0.35s; -ms-transition: all ease 0.35s; -o-transition: all ease 0.35s; transition: all ease 0.35s; width:unset; line-height:1; height:unset; padding:10px; } .apif-masnry-ui-three figure .apif-view-n-popup a:hover i{ background: #FFF; color: #000; } .apif-masnry-ui-three figure .apif-view-n-popup a i { color: #fff; } .apif-masnry-ui-three:hover figure .apif-overlay-cont-block { opacity: 1; display: block; right: 0; left: 0; bottom: 0; top: 0; color: #fff; } .apif-masnry-ui-three figure .apif-overlay-cont-block:before, .apif-masnry-ui-three figure .apif-overlay-cont-block:after{ position: absolute; top: 15px; right: 15px; bottom: 15px; left: 15px; content: ''; opacity: 0; -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; -ms-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; -webkit-transition: opacity 0.55s, -webkit-transform 0.55s; transition: opacity 0.55s, transform 0.55s; } .apif-masnry-ui-three figure .apif-overlay-cont-block:before{ border-top: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: scale(0,1); transform: scale(0,1); } .apif-masnry-ui-three figure .apif-overlay-cont-block:after{ border-right: 1px solid #fff; border-left: 1px solid #fff; -webkit-transform: scale(1,0); transform: scale(1,0); } .apif-masnry-ui-three:hover figure .apif-overlay-cont-block:before, .apif-masnry-ui-three:hover figure .apif-overlay-cont-block:after{ opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .apif-masnry-ui-three .apif-fig-content .profile-image { border-radius: 100%; height: 60px; width: 60px; display: inline-block; /*float: left;*/ border: 3px solid #fff; clear: both; } .apif-masnry-ui-three .apif-fig-content .apif-prof-n-name-wrap { display: block; overflow: hidden; clear: both; margin-top: -30px; padding: 0 30px; position: relative; z-index: 999; text-align: center; } .apif-masnry-ui-three .apif-fig-content .apif-image-caption { padding: 8px 10px; text-align: center; font-size: 14px; } .apif-masnry-ui-three .apif-fig-content .profile-image img { width: 100%; overflow: hidden; border-radius: 100%; } .apif-masnry-ui-three .ap_insta_like_count { display: inline-block; float: left; } .apif-masnry-ui-three .ap_insta_comment_count_wrapper { display: inline-block; float: left; margin-left: 10px; } .apif-masnry-ui-three span.apif-ins-link { position: absolute; top: 10px; right: 0; left: 0; margin: auto; } .apif-masnry-ui-three .coment-like { padding: 20px; display: block; } .apif-masnry-ui-three .apif-user-name { font-weight: normal; font-size: 15px; font-weight: 600; /*float: left;*/ padding: 10px 5% 4px 5%; margin: 0px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 90%; display: block; } #apif-shortcode-wrapper .apif-masnry-ui-three .coment-like { display: block !important; font-size: 15px; overflow: hidden; margin: 20px 10px 3px; padding: 10px 3px; border-top: 1px solid #dedcdc; color: #808080; } #apif-shortcode-wrapper .apif-masnry-ui-three .coment-like span p { margin: 0; padding: 0; font-size: 12px; } .apif-masnry-ui-three .ap-instagram_imge_like span { display: inline-block; float: left; margin-right: 5px; } .apif-masonry-box.apif-masnry-ui-three .apif-masonry-block { padding: 0; border: 1px solid #dedcdc; overflow: hidden; } .apif-masnry-ui-three .apif-masonry-block .apif-fig-content { /*padding: 0px 15px;*/ } .apif-masnry-ui-three .apif-masonry-block .apif-fig-content .ap_posted_ago { color: #808080; padding: 0; display: inline-block; float: right; font-size: 14px; } .apif-masnry-ui-three .apifeeds-social-icon-wrap{ margin-top: 5px; } .apif-masnry-ui-three .apifeeds-social-icon-wrap a i{ -webkit-transition: all ease 0.35s; -moz-transition: all ease 0.35s; -ms-transition: all ease 0.35s; -o-transition: all ease 0.35s; transition: all ease 0.35s; } .apif-masnry-ui-three .apifeeds-social-icon-wrap a:hover i.fa-facebook{ color: #3a559f; } .apif-masnry-ui-three .apifeeds-social-icon-wrap a:hover i.fa-twitter{ color: #11c1ff; } .apif-masnry-ui-three .apifeeds-social-icon-wrap a:hover i.fa-google-plus{ color: #f4521f; } .apif-masnry-ui-three .apifeeds-social-icon-wrap a:hover i.fa-pinterest{ color: #ca3737; } .apif-masnry-ui-three figure .apif-featimg a.example-image-link{ -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); -webkit-transition: all ease 0.35s; -moz-transition: all ease 0.35s; -ms-transition: all ease 0.35s; -o-transition: all ease 0.35s; transition: all ease 0.35s; } .apif-masnry-ui-three:hover figure .apif-featimg a.example-image-link{ -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /* apif-masnry-ui-four */ .apif-masnry-ui-four { /*width: 20%;*/ float: left; } .apif-masnry-ui-four .apif-masonry-block { border: 1px solid #ccc; } .apif-masnry-ui-four figure { position: relative; overflow: hidden; } .apif-masnry-ui-four figure .apif-image-overlay { left: 0; width: 100%; height: 100%; opacity: 0; position: absolute; text-indent: -9999em; transition: all ease 0.6s; z-index: 10; top: 0; } .apif-masnry-ui-four:hover figure .apif-image-overlay { opacity: 1; visibility: visible; } .apif-masnry-ui-four .apif-image-overlay { background: rgba(208,228,247,0.6); background: -moz-linear-gradient(top, rgba(208,228,247,0.6) 0%, rgba(115,177,231,0.6) 24%, rgba(10,119,213,0.6) 50%, rgba(83,159,225,0.6) 79%, rgba(135,188,234,0.6) 100%); background: -webkit-linear-gradient(top, rgba(208,228,247,0.6) 0%,rgba(115,177,231,0.6) 24%,rgba(10,119,213,0.6) 50%,rgba(83,159,225,0.6) 79%,rgba(135,188,234,0.6) 100%); background: linear-gradient(to bottom, rgba(208,228,247,0.6) 0%,rgba(115,177,231,0.6) 24%,rgba(10,119,213,0.6) 50%,rgba(83,159,225,0.6) 79%,rgba(135,188,234,0.6) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#87bcea',GradientType=0 ); visibility: hidden; opacity: 0; } .apif-masnry-ui-four figure .apif-overlay-cont-block { display: block; position: absolute; top: 0; z-index: 999; text-align: center; right: 0; left: 0; bottom: 0; opacity: 0; width: 100%; transition: all 0.9s ease-in-out 0s; } .apif-masnry-ui-four figure .apif-featimg a.example-image-link{ position: relative; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transition: transform 0.7s; -moz-transition: transform 0.7s; -ms-transition: transform 0.7s; -o-transition: transform 0.7s; transition: transform 0.7s; } .apif-masnry-ui-four:hover figure .apif-featimg a.example-image-link{ -webkit-transform: scale3d(1.15,1.15,1); -moz-transform: scale3d(1.15,1.15,1); -ms-transform: scale3d(1.15,1.15,1); -o-transform: scale3d(1.15,1.15,1); transform: scale3d(1.15,1.15,1); } .apif-masnry-ui-four figure .apif-featimg a.example-image-link:before{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.5); content: ''; -webkit-transition: -webkit-transform 0.4s; transition: transform 0.4s; -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0); transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0); } .apif-masnry-ui-four:hover figure .apif-featimg a.example-image-link:before{ -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0); transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0); } .apif-masnry-ui-four figure .apif-view-n-popup { position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; max-width: 100px; max-height: 50px; } .apif-masnry-ui-four figure .apif-view-n-popup i { border: 2px solid #fff; border-radius: 0; padding: 10px; margin-right: 4px; cursor: pointer; visibility: hidden; opacity: 0; -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transition: all ease 0.6s; -moz-transition: all ease 0.6s; -ms-transition: all ease 0.6s; -o-transition: all ease 0.6s; transition: all ease 0.6s; } .apif-masnry-ui-four figure .apif-view-n-popup a i{ color: #fff; -webkit-transition: all ease 0.35s; -moz-transition: all ease 0.35s; -ms-transition: all ease 0.35s; -o-transition: all ease 0.35s; transition: all ease 0.35s; } .apif-masnry-ui-four figure .apif-view-n-popup a:hover i{ background: #FFF; color: #0060ba; border-color: #FFF; } .apif-masnry-ui-four:hover figure .apif-view-n-popup i{ visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); width:unset; line-height:1; height:unset; } .apif-masnry-ui-four:hover figure .apif-overlay-cont-block { opacity: 1; display: block; right: 0; left: 0; bottom: 0; top: 0; color: #fff; } /*.apif-masnry-ui-four:hover figure .apif-overlay-cont-block:before { position: absolute; content: ""; left: 25px; right: 25px; bottom: 40px; top: 25px; z-index: -1; }*/ .apif-masnry-ui-four .apif-fig-content .profile-image { border-radius: 0; height: 70px; width: 70px; display: inline-block; /*float: left;*/ border: 3px solid #c5e0fa; clear: both; } .apif-masnry-ui-four .apif-fig-content .apif-prof-n-name-wrap { display: block; overflow: hidden; clear: both; margin-top: -30px; padding: 0 30px; position: relative; z-index: 999; text-align: center; } .apif-masnry-ui-four .apif-fig-content .apif-image-caption { padding: 8px 10px; text-align: center; font-size: 14px; } .apif-masnry-ui-four .apif-fig-content .apif-image-caption .apifeeds-social-icon-wrap{ display: block; margin-top: 15px; text-align: center; } .apif-masnry-ui-four .apif-fig-content .apif-image-caption .apifeeds-social-icon-wrap a i{ -webkit-transition: all ease 0.35s; -moz-transition: all ease 0.35s; -ms-transition: all ease 0.35s; -o-transition: all ease 0.35s; transition: all ease 0.35s; } .apif-masnry-ui-four .apif-fig-content .apif-image-caption .apifeeds-social-icon-wrap a:hover i.fa-facebook{ color: #3a559f; } .apif-masnry-ui-four .apif-fig-content .apif-image-caption .apifeeds-social-icon-wrap a:hover i.fa-twitter{ color: #11c1ff; } .apif-masnry-ui-four .apif-fig-content .apif-image-caption .apifeeds-social-icon-wrap a:hover i.fa-google-plus{ color: #f4521f; } .apif-masnry-ui-four .apif-fig-content .apif-image-caption .apifeeds-social-icon-wrap a:hover i.fa-pinterest{ color: #ca3737; } .apif-masnry-ui-four .apif-fig-content .profile-image img { width: 100%; overflow: hidden; border-radius: 0; } .apif-masnry-ui-four .ap_insta_like_count { display: inline-block; float: left; } .apif-masnry-ui-four .ap_insta_comment_count_wrapper { display: inline-block; float: left; margin-left: 5px; } .apif-masnry-ui-four span.apif-ins-link { position: absolute; top: 10px; right: 0; left: 0; margin: auto; } .apif-masnry-ui-four .coment-like { padding: 20px; display: block; } .apif-masnry-ui-four .apif-user-name { font-weight: normal; font-size: 15px; font-weight: 600; /*float: left;*/ padding: 10px 5% 4px 5%; margin: 0px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 90%; display: block; } #apif-shortcode-wrapper .apif-masnry-ui-four .coment-like { display: block !important; font-size: 15px; overflow: hidden; margin: 20px 0px 0px; padding: 10px; background: #007EF4; color: #fff; -webkit-border-radius: 0; border-radius: 0; } #apif-shortcode-wrapper .apif-masnry-ui-four .coment-like span p { margin: 0; padding: 0 0 0 2px; font-size: 12px; } .apif-masnry-ui-four .ap-instagram_imge_like span { display: inline-block; float: left; margin-right: 5px; } .apif-masonry-box.apif-masnry-ui-four .apif-masonry-block { padding: 10px; border: 1px solid #d0e4f7; overflow: hidden; } .apif-masnry-ui-four .apif-masonry-block .apif-fig-content { /*padding: 0px 15px;*/ } .apif-masnry-ui-four .apif-masonry-block .apif-fig-content .ap_posted_ago { color: #fff; padding: 0px 10px 0; display: inline-block; float: right; font-size: 14px; } /* apif-masnry-ui-five */ .apif-masnry-ui-five { /*width: 20%;*/ float: left; padding: 15px 10px !important; z-index: 1; } .apif-masonry-box.apif-masnry-ui-five { margin-bottom: 27px; } .apif-masnry-ui-five .apif-masonry-block { border: 1px solid #ccc; } .apif-masnry-ui-five figure { position: relative; overflow: hidden; min-height: 200px; } .apif-masnry-ui-five figure .apif-image-overlay { right: 0px; height: 100%; opacity: 0; position: absolute; transition: all 0.35s ease-in-out 0s; width: 100%; z-index: 10; top: 0; } .apif-masnry-ui-five figure .apif-featimg{ background: -moz-linear-gradient(top, rgba(141, 48, 130, 1) 0%, rgba(201, 43, 29, 1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(141, 48, 130, 1)), color-stop(100%, rgba(201, 43, 29, 1))); background: -webkit-linear-gradient(top, rgba(141, 48, 130, 1) 0%, rgba(201, 43, 29, 1) 100%); background: -o-linear-gradient(top, rgba(141, 48, 130, 1) 0%, rgba(201, 43, 29, 1) 100%); background: -ms-linear-gradient(top, rgba(141, 48, 130, 1) 0%, rgba(201, 43, 29, 1) 100%); background: linear-gradient(to bottom, rgba(141, 48, 130, 1) 0%, rgba(201, 43, 29, 1) 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#8d3082', endColorstr='#c92b1d', GradientType=0); } .apif-masnry-ui-five figure .apif-featimg a.example-image-link{ opacity: 0.7; } .apif-masnry-ui-five:hover figure .apif-image-overlay { opacity: 1; /*right: 0;*/ } .apif-masnry-ui-five .apif-image-overlay { /*background: rgba(141,48,130,4);*/ background: -moz-linear-gradient(top, rgba(141, 48, 130, 0.8) 0%, rgba(201, 43, 29, 0.4) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(141, 48, 130, 0.8)), color-stop(100%, rgba(201, 43, 29, 0.4))); background: -webkit-linear-gradient(top, rgba(141, 48, 130, 0.8) 0%, rgba(201, 43, 29, 0.4) 100%); background: -o-linear-gradient(top, rgba(141, 48, 130, 0.8) 0%, rgba(201, 43, 29, 0.4) 100%); background: -ms-linear-gradient(top, rgba(141, 48, 130, 0.8) 0%, rgba(201, 43, 29, 0.4) 100%); background: linear-gradient(to bottom, rgba(141, 48, 130, 0.8) 0%, rgba(201, 43, 29, 0.4) 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#8d3082', endColorstr='#c92b1d', GradientType=0); } .apif-masnry-ui-five .apif-image-overlay:after{ position: absolute; z-index: 1; top: 50%; left: 50%; width: 200px; height: 200px; border: 2px solid #fff; content: ''; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1); transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1); -webkit-transform-origin: 50%; transform-origin: 50%; } .apif-masnry-ui-five:hover .apif-image-overlay:after{ opacity: 1; -webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(1,1,1); transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(1,1,1); } .apif-masnry-ui-five.apif-small-size-display .apif-image-overlay:after{ height: 150px; width: 150px; } .apif-masnry-ui-five.apif-small-size-display.apif-large-desktop-col-5 .apif-image-overlay:after{ height: 120px; width: 120px; } .apif-masnry-ui-five.apif-small-size-display.apif-large-desktop-col-6 .apif-image-overlay:after{ height: 100px; width: 100px; } .apif-masnry-ui-five.apif-small-size-display.apif-large-desktop-col-5 figure .apif-overlay-cont-block .apif-middel-link-wrapper{ margin-top: -25px; width: 90px; height: 50px; } .apif-masnry-ui-five.apif-small-size-display.apif-large-desktop-col-6 figure .apif-overlay-cont-block .apif-middle-link-wrapper{ width: 80px; } .apif-masnry-ui-five.apif-small-size-display.apif-large-desktop-col-5 figure .apif-overlay-cont-block .coment-like, .apif-masnry-ui-five.apif-small-size-display.apif-large-desktop-col-6 figure .apif-overlay-cont-block .coment-like{ margin-top: 10px; } #apif-shortcode-wrapper .apif-masnry-ui-five.apif-masnry-ui-five.apif-small-size-display.apif-large-desktop-col-5 .coment-like span p, #apif-shortcode-wrapper .apif-masnry-ui-five.apif-masnry-ui-five.apif-small-size-display.apif-large-desktop-col-6 .coment-like span p{ font-size: 12px !important; } .apif-masnry-ui-five.apif-small-size-display.apif-large-desktop-col-5 figure .apif-overlay-cont-block .apif-view-n-popup a.apif-own-lightbox, .apif-masnry-ui-five.apif-small-size-display.apif-large-desktop-col-5 figure .apif-overlay-cont-block .apif-view-n-popup a.apif-ins-link, .apif-masnry-ui-five.apif-small-size-display.apif-large-desktop-col-6 figure .apif-overlay-cont-block .apif-view-n-popup a.apif-own-lightbox, .apif-masnry-ui-five.apif-small-size-display.apif-large-desktop-col-6 figure .apif-overlay-cont-block .apif-view-n-popup a.apif-ins-link{ font-size: 12px; } .apif-masnry-ui-five.apif-small-size-display.apif-large-desktop-col-5 figure .apif-overlay-cont-block .apif-user-name a, .apif-masnry-ui-five.apif-small-size-display.apif-large-desktop-col-6 figure .apif-overlay-cont-block .apif-user-name a{ font-size: 15px; } .apif-masnry-ui-five figure .apif-overlay-cont-block{ position: absolute; display: block; height: 100%; z-index: 11; top: 0; left: 0; width: 100%; text-align: center; } .apif-masnry-ui-five figure .apif-overlay-cont-block .apif-middle-link-wrapper{ position: absolute; top: 50%; left: 0; right: 0; height: 64px; width: 100px; margin: 0 auto; margin-top: -32px; } .apif-masnry-ui-five figure .apif-overlay-cont-block .apif-user-name{ position: absolute; top: 50%; left: 0; right: 0; text-align: center; margin-top: -14px; -webkit-transition: opacity 0.35s, transform 0.35s; -moz-transition: opacity 0.35s, transform 0.35s; -ms-transition: opacity 0.35s, transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; } .apif-masnry-ui-five:hover figure .apif-overlay-cont-block .apif-user-name{ opacity: 0; -webkit-transform: scale3d(0.8,0.8,1); -moz-transform: scale3d(0.8,0.8,1); -ms-transform: scale3d(0.8,0.8,1); -o-transform: scale3d(0.8,0.8,1); transform: scale3d(0.8,0.8,1); } .apif-masnry-ui-five figure .apif-overlay-cont-block .apif-user-name a{ font-size: 18px; font-weight: 600; color: #FFF; } .apif-masnry-ui-five figure .apif-overlay-cont-block .apif-view-n-popup{ display: block; width: 100%; } .apif-masnry-ui-five figure .apif-overlay-cont-block .apif-view-n-popup:before, .apif-masnry-ui-five figure .apif-overlay-cont-block .apif-view-n-popup:after{ clear: both; display: table; content: ""; } .apif-masnry-ui-five figure .apif-overlay-cont-block .apif-view-n-popup a.apif-own-lightbox{ float: left; display: inline-block; font-size: 14px; color: #FFF; margin-left: 20px; opacity: 0; -webkit-transform: translate3d(-60px,-60px,0); -moz-transform: translate3d(-60px,-60px,0); -ms-transform: translate3d(-60px,-60px,0); -o-transform: translate3d(-60px,-60px,0); transform: translate3d(-60px,-60px,0); -webkit-transition: opacity 0.35s, transform 0.35s; -moz-transition: opacity 0.35s, transform 0.35s; -ms-transition: opacity 0.35s, transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; } .apif-masnry-ui-five:hover figure .apif-overlay-cont-block .apif-view-n-popup a.apif-own-lightbox{ -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } .apif-masnry-ui-five figure .apif-overlay-cont-block .apif-view-n-popup a.apif-ins-link{ float: right; display: inline-block; font-size: 14px; color: #FFF; margin-right: 10px; opacity: 0; -webkit-transform: translate3d(60px,-60px,0); -moz-transform: translate3d(60px,-60px,0); -ms-transform: translate3d(60px,-60px,0); -o-transform: translate3d(60px,-60px,0); transform: translate3d(60px,-60px,0); -webkit-transition: opacity 0.35s, transform 0.35s; -moz-transition: opacity 0.35s, transform 0.35s; -ms-transition: opacity 0.35s, transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; } .apif-masnry-ui-five:hover figure .apif-overlay-cont-block .apif-view-n-popup a.apif-ins-link{ -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } .apif-masnry-ui-five figure .apif-overlay-cont-block .coment-like{ display: block; margin-top: 25px; } .apif-masnry-ui-five figure .apif-overlay-cont-block .coment-like:before, .apif-masnry-ui-five figure .apif-overlay-cont-block .coment-like:after{ display: table; content: ""; clear: both; } .apif-masnry-ui-five figure .apif-overlay-cont-block .coment-like .ap_insta_like_count{ display: inline-block; float: left; opacity: 0; -webkit-transform: translate3d(-60px,60px,0); -moz-transform: translate3d(-60px,60px,0); -ms-transform: translate3d(-60px,60px,0); -o-transform: translate3d(-60px,60px,0); transform: translate3d(-60px,60px,0); -webkit-transition: opacity 0.35s, transform 0.35s; -moz-transition: opacity 0.35s, transform 0.35s; -ms-transition: opacity 0.35s, transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; } .apif-masnry-ui-five:hover figure .apif-overlay-cont-block .coment-like .ap_insta_like_count{ -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } .apif-masnry-ui-five figure .apif-overlay-cont-block .coment-like .ap_insta_comment_count_wrapper{ display: inline-block; float: right; -webkit-transform: translate3d(60px,60px,0); -moz-transform: translate3d(60px,60px,0); -ms-transform: translate3d(60px,60px,0); -o-transform: translate3d(60px,60px,0); transform: translate3d(60px,60px,0); opacity: 0; -webkit-transition: opacity 0.35s, transform 0.35s; -moz-transition: opacity 0.35s, transform 0.35s; -ms-transition: opacity 0.35s, transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; } .apif-masnry-ui-five:hover figure .apif-overlay-cont-block .coment-like .ap_insta_comment_count_wrapper{ -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } .apif-masnry-ui-five .apifeeds-social-icon-wrap{ display: block; width: 100%; margin-top: 10px; text-align: center; } .apif-masnry-ui-five .apifeeds-social-icon-wrap a{ display: inline-block; } .apif-masnry-ui-five .apifeeds-social-icon-wrap a i{ display: block; height: 30px; width: 30px; text-align: center; line-height: 30px; color: #FFF; -webkit-transition: all ease 0.35s; -moz-transition: all ease 0.35s; -ms-transition: all ease 0.35s; -o-transition: all ease 0.35s; transition: all ease 0.35s; } .apif-masnry-ui-five .apifeeds-social-icon-wrap a i.fa-facebook{ background: #3a559f; } .apif-masnry-ui-five .apifeeds-social-icon-wrap a i.fa-twitter{ background: #30b6f3; } .apif-masnry-ui-five .apifeeds-social-icon-wrap a i.fa-google-plus{ background: #f4521f; } .apif-masnry-ui-five .apifeeds-social-icon-wrap a i.fa-pinterest{ background: #ca3737; } .apif-masnry-ui-five .apifeeds-social-icon-wrap a:hover i{ background: #000; } /*.apif-masnry-ui-five figure .apif-overlay-cont-block { display: block; position: absolute; top: 0; z-index: 999; text-align: center; right: 0; left: 0; bottom: 0; opacity: 0; width: 100%; transition: all 0.9s ease-in-out 0s; } .apif-masnry-ui-five figure .apif-view-n-popup { position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; max-width: 100px; max-height: 50px; } .apif-masnry-ui-five figure .apif-view-n-popup i { border: 2px solid #fff; border-radius: 50%; padding: 10px; margin-right: 4px; cursor: pointer; } .apif-masnry-ui-five figure .apif-view-n-popup a i { color: #fff; } .apif-masnry-ui-five:hover figure .apif-overlay-cont-block { opacity: 1; display: block; right: 0; left: 0; bottom: 0; top: 0; color: #fff; } .apif-masnry-ui-five:hover figure .apif-overlay-cont-block:before { position: absolute; content: ""; left: 25px; right: 25px; bottom: 40px; top: 25px; border: 2px solid #fff; z-index: -1; }*/ .apif-masnry-ui-five .apif-fig-content .profile-image { border-radius: 100%; height: 70px; width: 70px; display: inline-block; /*float: left;*/ /*border: 3px solid #fff;*/ clear: both; } .apif-masnry-ui-five .apif-fig-content .apif-prof-n-name-wrap { display: block; overflow: hidden; clear: both; margin-top: -30px; padding: 0 30px; position: relative; z-index: 999; text-align: center; } .apif-masnry-ui-five .apif-fig-content .apif-image-caption { padding: 8px 10px; text-align: center; font-size: 14px; } .apif-masnry-ui-five .apif-fig-content .profile-image img { width: 100%; overflow: hidden; border-radius: 100%; } .apif-masnry-ui-five .ap_insta_like_count { display: inline-block; float: left; } .apif-masnry-ui-five .ap_insta_comment_count_wrapper { display: inline-block; float: right; } .apif-masnry-ui-five span.apif-ins-link { position: absolute; top: 10px; right: 0; left: 0; margin: auto; } /*.apif-masnry-ui-five .coment-like { padding: 20px; display: block; }*/ /*.apif-masnry-ui-five .apif-user-name { font-weight: normal; font-size: 15px; padding: 10px 5% 4px 5%; margin: 0px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 90%; display: block; color: #000; font-weight: 600; }*/ /*#apif-shortcode-wrapper .apif-masnry-ui-five .coment-like { display: block !important; font-size: 15px; overflow: hidden; margin: 20px 0px 0px; padding: 10px 30px; border-radius: 8px; position: absolute; bottom: 40px; right: 0px; left: 0px; margin: auto; max-width: 180px; }*/ #apif-shortcode-wrapper .apif-masnry-ui-five .coment-like span p { margin: 0; padding: 0; font-size: 14px; font-weight: 600; color: #FFF; } .apif-masnry-ui-five .ap-instagram_imge_like span { /*display: inline-block; float: left; margin-right: 5px;*/ } .apif-masonry-box.apif-masnry-ui-five .apif-masonry-block { overflow: hidden; border: solid 1px #eee; } .apif-masnry-ui-five .apif-masonry-block .apif-fig-content { /*padding: 0px 15px;*/ margin-bottom: 10px; } .apif-masnry-ui-five .apif-masonry-block .apif-fig-content .ap_posted_ago { padding: 0px 10px 0; text-align: center; display: block; font-size: 12px; } .apif-masnry-ui-five .apif-masonry-block .apif-fig-content .ap_posted_ago p { margin: 0; margin-top: 15px; font-size: 11px; text-transform: uppercase; } .apif-masnry-ui-five.effect5 { position: relative; } .apif-masnry-ui-five.effect5:before, .apif-masnry-ui-five.effect5:after { z-index: -1; position: absolute; content: ""; bottom: 25px; left: 17px; width: 50%; top: 80%; max-width: 300px; background: #777; box-shadow: 0 10px 8px #777; transform: rotate(-3deg); } .apif-masnry-ui-five.effect5:after { transform: rotate(3deg); right: 17px; left: auto; } .apif-popup-disc { display: block; overflow: hidden; clear: both; } /* Top */ .apif-masnry-ui-five .effect-top5 { position: relative; z-index: 1; } .apif-masnry-ui-five .effect-top5:before, .apif-masnry-ui-five .effect-top5:after { z-index: -1; position: absolute; content: ""; top: 11px; left: 7px; width: 50%; bottom: 80%; max-width: 300px; /* background: #777; */ box-shadow: 0px -10px 10px #777; transform: rotate(3deg); } .apif-masnry-ui-five .effect-top5:after { transform: rotate(-5deg); right: 7px; left: auto; } /* image-zoom-style */ .apif-image-zoom-style { /*width: 20%;*/ float: left; } .apif-image-zoom-style figure { position: relative; overflow: hidden; } .apif-image-zoom-style figure .apif-image-overlay { height: 100%; opacity: 0; position: absolute; text-indent: -9999em; transition: all 500ms ease 0s; width: 100%; z-index: 10; top: 0; left: 0; } .apif-image-zoom-style:hover figure .apif-image-overlay { opacity: 1; right: 0; } .apif-image-zoom-style .apif-image-overlay { background: rgba(255, 255, 255, 0.8); } .apif-image-zoom-style figure .apif-overlay-cont-block { display: block; position: absolute; top: 0; z-index: 999; text-align: center; right: 0; left: 0; bottom: 0; opacity: 0; width: 100%; transition: all 0.9s ease-in-out 0s; } .apif-image-zoom-style:hover figure .apif-overlay-cont-block { opacity: 1; display: block; right: 0; left: 0; bottom: 0; top: 0; } .apif-image-zoom-style .apif-featimg img { transform: scale(1) translateZ(0); -ms-transform: scale(1) translateZ(0); -webkit-transform: scale(1) translateZ(0); transition: all 0.6s ease-in-out 0s; -moz-transition: all 0.6s ease-in-out 0s; -webkit-transition: all 0.6s ease-in-out 0s; } .ap_feeds-grid_layout1 .apif-image-zoom-style .apif-featimg img { /* height: 100%; min-width: 100%; max-width: inherit;*/ min-width: 100%; min-height: 100%; } .apif-image-zoom-style:hover .apif-featimg img { transform: scale(1.05); } .apif-image-zoom-style figure .profile-image { border-radius: 100%; height: 50px; width: 50px; display: inline-block; margin-top: 25px; } .apif-image-zoom-style figure .profile-image img { width: 100%; overflow: hidden; border-radius: 100%; } .apif-image-zoom-style .ap_insta_like_count { display: inline-block; float: left; } .apif-image-zoom-style .ap_insta_comment_count_wrapper { display: inline-block; float: right; } .apif-image-zoom-style span.apif-ins-link { position: absolute; top: 10px; right: 10px; display: inline-block; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; -ms-transition: all ease 0.3s; -o-transition: all ease 0.3s; transition: all ease 0.3s; } .apif-image-zoom-style span.apif-ins-link:hover{ top: 5px; } .apif-image-zoom-style .coment-like { padding: 20px; display: block; } .apif-image-zoom-style .apif-user-name { font-weight: bold; font-size: 15px; } .apif-image-zoom-style .ap-instagram_imge_like span { display: inline-block; float: left; margin-right: 5px; } /* image-zoom-style */ .apif-img-text { /*width: 20%;*/ float: left; } .apif-img-text figure { position: relative; overflow: hidden; } .apif-img-text figure .apif-image-overlay { height: 100%; opacity: 0; position: absolute; text-indent: -9999em; transition: all 500ms ease 0s; width: 100%; z-index: 10; top: 0; left: 0; } .apif-img-text:hover figure .apif-image-overlay { opacity: 1; right: 0; } .apif-img-text .apif-image-overlay { background: rgba(255, 255, 255, 0.8); } .apif-img-text figure .apif-overlay-cont-block { display: block; position: absolute; top: -300px; z-index: 999; text-align: center; right: 0; left: 0; opacity: 0; width: 100%; transition: all 0.4s ease-in-out 0s; } .apif-img-text:hover figure .apif-overlay-cont-block { opacity: 1; display: block; right: 0; left: 0; bottom: 0; top: 0; } .apif-img-text .apif-featimg img { transform: scale(1); transition: all 0.6s ease-in-out 0s; } .apif-img-text:hover .apif-featimg img { transform: scale(1.04); } .apif-img-text figure .profile-image { border-radius: 100%; height: 50px; width: 50px; display: inline-block; } .apif-img-text figure .profile-image img { width: 100%; overflow: hidden; border-radius: 100%; } .apif-img-text .ap_insta_like_count { display: inline-block; float: left; } .apif-img-text .ap_insta_comment_count_wrapper { display: inline-block; float: right; } .apif-img-text span.apif-ins-link { position: absolute; top: 10px; right: 10px; display: inline-block; z-index: 99; } .apif-img-text .coment-like { padding: 20px; display: block; } .apif-img-text .apif-user-name { font-weight: bold; font-size: 15px; } .apif-img-text .ap-instagram_imge_like span { display: inline-block; float: left; margin-right: 5px; } /* Rotate image effect */ .apif-img-rotate { /*width: 20%;*/ float: left; } .apif-img-rotate figure { position: relative; overflow: hidden; } .apif-img-rotate figure .apif-image-overlay { height: 100%; opacity: 0; position: absolute; text-indent: -9999em; transition: all 500ms ease 0s; width: 100%; z-index: 10; top: 0; left: 0; } .apif-img-rotate:hover figure .apif-image-overlay { opacity: 1; right: 0; } .apif-img-rotate .apif-image-overlay { background: rgba(255, 255, 255, 0.8); } .apif-img-rotate figure .apif-overlay-cont-block { display: block; position: absolute; top: -300px; z-index: 999; text-align: center; right: 0; left: 0; opacity: 0; width: 100%; transition: all 0.4s ease-in-out 0s; } .apif-img-rotate:hover figure .apif-overlay-cont-block { opacity: 1; display: block; right: 0; left: 0; bottom: 0; top: 0; } .apif-img-rotate .apif-featimg img { transition: all 0.4s ease-in-out 0s; } .apif-img-rotate:hover .apif-featimg img { transform: rotate(90deg); } .apif-img-rotate figure .profile-image { border-radius: 100%; height: 50px; width: 50px; display: inline-block; margin-top: 25px; } .apif-img-rotate figure .profile-image img { width: 100%; overflow: hidden; border-radius: 100%; } .apif-img-rotate .ap_insta_like_count { display: inline-block; float: left; } .apif-img-rotate .ap_insta_comment_count_wrapper { display: inline-block; float: right; } .apif-img-rotate span.apif-ins-link { position: absolute; top: 10px; right: 10px; display: inline-block; } .apif-img-rotate .coment-like { padding: 20px; display: block; } .apif-img-rotate .apif-user-name { font-weight: bold; font-size: 15px; } .apif-img-rotate .ap-instagram_imge_like span { display: inline-block; float: left; margin-right: 5px; } /* Apif image Zoom out */ .apif-img-zoomout { /*width: 20%;*/ float: left; } .apif-img-zoomout figure { overflow: hidden; position: relative; margin: 0; } .apif-img-zoomout figure:after, .apif-img-zoomout figure:before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 0; } /*.apif-img-zoomout:hover figure:before{ background: rgba(100, 150, 255, 0.8);}*/ .apif-img-zoomout figure .apif-image-overlay { height: 100%; opacity: 0; position: absolute; text-indent: -9999em; transition: all 500ms ease 0s; width: 100%; z-index: 10; top: 0; left: 0; display: none; } /*.apif-img-zoomout:hover figure .apif-image-overlay{ opacity: 1; right: 0;} .apif-img-zoomout .apif-image-overlay{ background: rgba(255, 255,255, 0.8); display: }*/ .apif-img-zoomout figure .apif-overlay-cont-block { display: block; position: absolute; top: -300px; z-index: 999; text-align: center; right: 0; left: 0; opacity: 0; width: 100%; transition: all 0.4s ease-in-out 0s; padding-top: 60%; } .apif-img-zoomout:hover figure .apif-overlay-cont-block { opacity: 1; display: block; right: 0; left: 0; bottom: 0; top: 0; } .apif-img-zoomout .apif-featimg img { transform: scale(1.0); transition: all 0.6s ease-in-out 0s; z-index: 9999; } .apif-img-zoomout:hover .apif-featimg img { transform: translateY(-45px) scale(0.4); top: 0; filter: none; -webkit-filter: blur(0px); -moz-filter: blur(0px); -ms-filter: blur(0px); filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius='0'); } .apif-img-zoomout figure .profile-image { border-radius: 100%; height: 50px; width: 50px; display: inline-block; margin-top: 25px; display: none; /* none dispaly added */ } .apif-img-zoomout figure .profile-image img { width: 100%; overflow: hidden; border-radius: 100%; } .apif-img-zoomout .ap_insta_like_count { display: inline-block; float: left; } .apif-img-zoomout .ap_insta_comment_count_wrapper { display: inline-block; float: right; } .apif-img-zoomout span.apif-ins-link { position: absolute; top: 10px; right: 10px; display: inline-block; } .apif-img-zoomout .coment-like { padding: 20px; display: block; } .apif-img-zoomout .apif-user-name { font-weight: bold; font-size: 15px; } .apif-img-zoomout .ap-instagram_imge_like span { display: inline-block; float: left; margin-right: 5px; } .hoverlay-link { bottom: 0; left: 0; position: absolute; right: 0; text-indent: -9999em; top: 0; z-index: 1; } /* masonry col style */ .apif-masonry-box { float: left; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding: 8px; } .apif-template-masonry_layout1 .apif-masonry-box{ padding: 5px; } .apif-masonry-box figure { margin: 0; } .apif-masonry-box.apif-large-desktop-col-5{ width: 20%; } .apif-masonry-box.apif-large-desktop-col-4{ width: 25%; } .apif-masonry-box.apif-large-desktop-col-3{ width: 33.3333%; } .apif-masonry-box.apif-large-desktop-col-2{ width: 50%; } .apif-masonry-box .apif-masonry-block { border: 2px double #f3f3f3; background: #f9f9f9; -webkit-box-sizing: border-box; /* Android ≤ 2.3, iOS ≤ 4 */ -moz-box-sizing: border-box; /* Firefox ≤ 28 */ box-sizing: border-box; /* Chrome, Firefox 29+, IE 8+, Opera, Safari 5.1 */ } .apif-template-masonry_layout1 .apif-masonry-box .apif-masonry-block{ border: none; padding: 0; background: #f1f1f1; } .hello-text { position: relative; display: block; } .apif-masonry-block { position: relative; display: block; padding: 10px; } /* Instragram layout */ .apif-instagram-layout { clear: both; float: none !important; margin: 0 auto; position: relative !important; display: block !important; left: 0 !important; top: 0 !important; max-width: 600px; width: 100%; background: #fff; margin-bottom: 50px; padding: 20px; padding-bottom: 30px; max-width: 600px; border: 1px solid #e5e5e5; overflow: hidden; } .apif-instagram-layout figure { text-align: center; position: relative; margin: 0; } .apif-instagram-layout .apif-fig-content { clear: both; margin-top: 10px; } .apif-instagram-layout .apif-fig-content { padding: 5px; display: block; float: left; } .apif-instagram-layout .apif-fig-content .apif-user-link{ display: block; text-align: center; margin: 10px 0 20px; width: 100%; line-height: 1; } .apif-instagram-layout .apif-user-name a, .apif-instagram-layout .apif-fig-content .apif-user-link a{ font-size: 14px; font-weight: 600; color: #262626; -webkit-transition: all ease 0.35s; -moz-transition: all ease 0.35s; -ms-transition: all ease 0.35s; -o-transition: all ease 0.35s; transition: all ease 0.35s; } .apif-instagram-layout .apif-user-name a:hover, .apif-instagram-layout .apif-fig-content .apif-user-link a:hover{ color: #3897f0; } .apif-instagram-layout .apif-insta-cont-block { padding: 5px 2px 20px; display: block; float: left; width: 100%; line-height: 1; border-bottom: 1px solid #eee; } .apif-instagram-layout .apif-insta-cont-block .ap_insta_like_count{ float: left; } .apif-instagram-layout .apif-insta-cont-block .ap_insta_like_count p{ margin: 0; } .apif-instagram-layout .apif-fig-content .apif-user-link { float: left; margin-right: 8px; } .apif-instagram-layout .apif-fig-content .apif-image-caption { display: inline; } .apif-instagram-layout .apif-insta-content-wrap{ display: block; } .apif-instagram-layout .apif-insta-content-wrap:before, .apif-instagram-layout .apif-insta-content-wrap:after{ clear: both; content: ""; display: table; } .apif-instagram-layout .apif-instagram-block .profile-image { width: 50px; height: 50px; border-radius: 100%; overflow: hidden; float: left; } .apif-instagram-layout .apif-instagram-block .header-insta-wrap { padding: 0px 2px 20px 0; clear: both; overflow: hidden; /*border-bottom: 1px solid #e5e5e5;*/ } .apif-instagram-layout .apif-instagram-block .apif-featimg { margin: 0px 0 20px 0; } .apif-instagram-layout .apif-instagram-block .apif-featimg img{ vertical-align: top; } .apif-instagram-layout .apif-instagram-block .header-insta-wrap .ap_posted_ago { float: right; margin-top: 13px; font-size: 11px; color: #999; text-transform: uppercase; } .apif-instagram-layout .apif-instagram-block .header-insta-wrap .apif-user-name { margin: 12px 10px; float: left; } .apif-instagram-layout .ap_insta_like_count { display: inline-block; float: left; } .apif-instagram-layout .ap_insta_comment_count_wrapper { display: inline-block; float: right; font-size: 14px; } .apif-instagram-layout span.apif-ins-link { position: absolute; top: 10px; right: 10px; display: inline-block; } .apif-instagram-layout span.apif-ins-link a{ color: #FFF; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); -webkit-transition: all ease 0.35s; -moz-transition: all ease 0.35s; -ms-transition: all ease 0.35s; -o-transition: all ease 0.35s; transition: all ease 0.35s; } .apif-instagram-layout span.apif-ins-link a:hover{ color: #000; text-shadow: 2px 2px 4px rgba(255,255,255,0.5); } .apif-instagram-layout .coment-like { padding: 20px; display: block; } .apif-instagram-layout .apif-user-name { font-weight: bold; font-size: 15px; } .apif-instagram-layout .apif-user-name a { font-size: 14px; } .apif-instagram-layout .ap-instagram_imge_like span { display: inline-block; float: left; margin-right: 5px; font-size: 14px; } .apif-instagram-layout .apifeeds-social-icon-wrap{ display: block; margin: 20px 0 0; width: 100%; text-align: center; } .load-more-button { border-radius: 2px; padding: 8px 18px; text-decoration: none !important; transition: all 0.6s ease-in-out 0s; background: #000; border: 2px solid #000; color: #fff !important; } .ap_pagination .load-more-button:hover, .load-more-button:hover { background: #f1f1f1; color: #000 !important; border: 2px solid #000; } /* ------- Round Image layout ------ */ .apif-round-image-layout { float: left; margin-bottom: 20px; } .apif-round-image-layout.apif-col-2 { width: 50%; } .apif-round-image-layout.apif-col-3 { width: 33.3333%; } .apif-round-image-layout.apif-col-4 { width: 25%; } .apif-round-image-layout.apif-col-5 { width: 20%; } .apif-round-image-layout.apif-col-6 { width: 16.6666666%; } .apif-round-image-layout .apif-round-image-block .apif-round-img-info .apif-img-round-c-like p { margin-bottom: 0; margin-top: 0; } .apif-round-image-layout .apif-round-image-block .apif-round-img-info .apif-img-round-c-like span { display: inline-block; padding: 0 2px; } .apif-round-image-layout .apif-round-image-block .apif-round-img-info .apif-img-round-c-like span.apif-count{ padding-right: 0; } .apif-round-image-layout .apif-round-image-block .apif-round-img-info .apif-img-round-c-like span.apif-ound-img-count{ padding-left: 0; } .apif-round-image-layout .apif-round-image-block .apif-round-img-info .apif-img-round-c-like span.ap_imground_comment_count_wrapper{ margin-left: 10px; } .apif-round-image-layout .apif-round-image-block .apif-round-img-info .apif-img-round-c-like span.comment_count{ padding-right: 0; } .apif-round-image-layout .apif-round-image-block .apif-round-img-info .apif-img-round-c-like span.ap_imground_count{ padding-left: 0; } .apif-round-image-layout .apif-round-image-block .apif-round-img-info .apif-img-round-c-like { margin-top: 10px; } .apif-round-image-layout .apif-round-image-block .apif-round-img-info .apif-img-round-c-like .apif-ins-link { margin-top: 30px; } /* circle left */ .apif-round-image-layout .apif-round-image-block.circle-bottom { overflow: visible; } .apif-round-image-layout .apif-round-image-block.circle-left { overflow: visible; } .apif-round-image-layout .apif-round-image-block.circle-right { overflow: visible; } .apif-round-image-layout .apif-round-image-block { overflow: hidden; } .apif-round-image-layout .apif-round-image-block.circle-left { border-radius: 50%; height: auto; position: relative; width: 100%; background-color: #fff; } .apif-round-image-layout .apif-round-image-block.circle-left .img::before { position: absolute; display: block; content: ''; width: 100%; height: 100%; border-radius: 50%; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .apif-round-image-layout .apif-round-image-block.circle-left { border-radius: 50%; height: auto; position: relative; width: 100%; } .apif-round-image-layout .apif-round-image-block.circle-left .img img.img-thumb { border-radius: 50%; height: auto; width: 100%; } .apif-round-image-layout .apif-round-image-block.circle-left { box-sizing: border-box; padding: 10px; } .apif-round-image-layout .apif-round-image-block.circle-left .apif-round-img-info { transform: translateX(0%); -webkit-transform: translateX(0%); -ms-transform: translateX(0%); opacity: 0; transition: all 0.35s ease-in-out 0s; -webkit-transition: all 0.35s ease-in-out 0s; -ms-transition: all 0.35s ease-in-out 0s; } .apif-round-image-layout .apif-round-image-block.circle-left .apif-round-img-info { backface-visibility: hidden; border-radius: 100%; bottom: 0px; left: 0px; position: absolute; right: 0px; text-align: center; top: 0px; z-index: 1; background: #f1f1f1; height: 100%; width: 100%; border: 2px solid #ddd; -webkit-box-sizing: border-box; /* Android ≤ 2.3, iOS ≤ 4 */ -moz-box-sizing: border-box; /* Firefox ≤ 28 */ box-sizing: border-box; /* Chrome, Firefox 29+, IE 8+, Opera, Safari 5.1 */ } .apif-round-image-layout .apif-round-image-block.circle-left a { display: block; } .apif-round-image-layout .apif-round-image-block.circle-left .img { border-radius: 50%; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; position: relative; } .apif-round-image-layout .apif-round-image-block.circle-left .img { -webkit-transform: scale(1) translateX(0); -moz-transform: scale(1) translateX(0); -ms-transform: scale(1) translateX(0); -o-transform: scale(1) translateX(0); transform: scale(1) translateX(0); } .apif-round-image-layout:hover .apif-round-image-block.circle-left .img { -webkit-transform: scale(0.5) translateX(-100%); -moz-transform: scale(0.5) translateX(-100%); -ms-transform: scale(0.5) translateX(-100%); -o-transform: scale(0.5) translateX(-100%); transform: scale(0.5) translateX(-100%); z-index: 111; } .apif-round-image-layout:hover .apif-round-image-block.circle-left .apif-round-img-info { opacity: 1; transform: translateX(0px); -webkit-transform: translateX(0px); } .apif-round-image-layout:hover .apif-round-image-block.circle-left > a:not(.btn) { display: block; } .apif-round-image-layout .apif-round-image-block.circle-left .apif-round-img-info .apif-img-round-p-image { display: inline-block; width: 50px; height: 50px; clear: both; margin-top: 20px; } .apif-round-image-layout .apif-round-image-block.circle-left .apif-round-img-info .apif-img-round-p-image > img { border-radius: 50%; } /*.... circle right ....*/ .apif-round-image-layout .apif-round-image-block.circle-right { border-radius: 50%; height: auto; position: relative; width: 100%; background-color: #fff; } .apif-round-image-layout .apif-round-image-block.circle-right .img::before { position: absolute; display: block; content: ''; width: 100%; height: 100%; border-radius: 50%; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .apif-round-image-layout .apif-round-image-block.circle-right { border-radius: 50%; height: auto; position: relative; width: 100%; } .apif-round-image-layout .apif-round-image-block.circle-right .img img.img-thumb { border-radius: 50%; height: auto; width: 100%; } .apif-round-image-layout .apif-round-image-block.circle-right { box-sizing: border-box; padding: 10px; } .apif-round-image-layout .apif-round-image-block.circle-right .apif-round-img-info { transform: translateX(0%); opacity: 0; transition: all 0.35s ease-in-out 0s; } .apif-round-image-layout .apif-round-image-block.circle-right .apif-round-img-info { backface-visibility: hidden; border-radius: 100%; bottom: 0px; left: 0px; position: absolute; right: 0px; text-align: center; top: 0px; z-index: 1; background: #f1f1f1; height: 100%; width: 100%; border: 2px solid #ddd; -webkit-box-sizing: border-box; /* Android ≤ 2.3, iOS ≤ 4 */ -moz-box-sizing: border-box; /* Firefox ≤ 28 */ box-sizing: border-box; /* Chrome, Firefox 29+, IE 8+, Opera, Safari 5.1 */ } .apif-round-image-layout .apif-round-image-block.circle-right a { display: block; } .apif-round-image-layout .apif-round-image-block.circle-right .img { border-radius: 50%; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; position: relative; } .apif-round-image-layout .apif-round-image-block.circle-right .img { -webkit-transform: scale(1) translateX(0); -moz-transform: scale(1) translateX(0); -ms-transform: scale(1) translateX(0); -o-transform: scale(1) translateX(0); transform: scale(1) translateX(0); } .apif-round-image-layout:hover .apif-round-image-block.circle-right .img { -webkit-transform: scale(0.5) translateX(100%); -moz-transform: scale(0.5) translateX(100%); -ms-transform: scale(0.5) translateX(100%); -o-transform: scale(0.5) translateX(100%); transform: scale(0.5) translateX(100%); z-index: 111; } .apif-round-image-layout:hover .apif-round-image-block.circle-right .apif-round-img-info { opacity: 1; transform: translateX(0px); } .apif-round-image-layout:hover .apif-round-image-block.circle-right > a:not(.btn) { display: block; } .apif-round-image-layout .apif-round-image-block.circle-right .apif-round-img-info .apif-img-round-p-image { display: inline-block; width: 50px; height: 50px; clear: both; margin-top: 20px; } .apif-round-image-layout .apif-round-image-block.circle-right .apif-round-img-info .apif-img-round-p-image > img { border-radius: 50%; } .apif-round-image-layout .apif-round-image-block.circle-right .apif-round-img-info .apif-img-round-c-like { color: #000; } /*.... circle bottom ....*/ .apif-round-image-layout .apif-round-image-block.circle-bottom { border-radius: 50%; height: auto; position: relative; width: 100%; background-color: #fff; } .apif-round-image-layout .apif-round-image-block.circle-bottom .img::before { position: absolute; display: block; content: ''; width: 100%; height: 100%; border-radius: 50%; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .apif-round-image-layout .apif-round-image-block.circle-bottom { border-radius: 50%; height: auto; position: relative; width: 100%; } .apif-round-image-layout .apif-round-image-block.circle-bottom .img img.img-thumb { border-radius: 50%; height: auto; width: 100%; } .apif-round-image-layout .apif-round-image-block.circle-bottom { box-sizing: border-box; padding: 10px; } .apif-round-image-layout .apif-round-image-block.circle-bottom .apif-round-img-info { transform: translateX(0%); opacity: 0; transition: all 0.35s ease-in-out 0s; } .apif-round-image-layout .apif-round-image-block.circle-bottom .apif-round-img-info { backface-visibility: hidden; border-radius: 100%; bottom: 0px; left: 0px; position: absolute; right: 0px; text-align: center; top: 0px; z-index: 1; background: #f1f1f1; height: 100%; width: 100%; border: 2px solid #ddd; -webkit-box-sizing: border-box; /* Android ≤ 2.3, iOS ≤ 4 */ -moz-box-sizing: border-box; /* Firefox ≤ 28 */ box-sizing: border-box; /* Chrome, Firefox 29+, IE 8+, Opera, Safari 5.1 */ } .apif-round-image-layout .apif-round-image-block.circle-bottom a { display: block; } .apif-round-image-layout .apif-round-image-block.circle-bottom .img { border-radius: 50%; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; position: relative; } .apif-round-image-layout .apif-round-image-block.circle-bottom .img { -webkit-transform: scale(1) translateX(0); -moz-transform: scale(1) translateX(0); -ms-transform: scale(1) translateX(0); -o-transform: scale(1) translateX(0); transform: scale(1) translateX(0); } .apif-round-image-layout:hover .apif-round-image-block.circle-bottom .img { -webkit-transform: scale(0.5) translateY(100%); -moz-transform: scale(0.5) translateY(100%); -ms-transform: scale(0.5) translateY(100%); -o-transform: scale(0.5) translateY(100%); transform: scale(0.5) translateY(100%); z-index: 111; } .apif-round-image-layout:hover .apif-round-image-block.circle-bottom .apif-round-img-info { opacity: 1; transform: translateX(0px); } .apif-round-image-layout:hover .apif-round-image-block.circle-bottom > a:not(.btn) { display: block; } .apif-round-image-layout .apif-round-image-block.circle-bottom .apif-round-img-info .apif-img-round-p-image { display: inline-block; width: 50px; height: 50px; clear: both; margin-top: 20px; } .apif-round-image-layout .apif-round-image-block.circle-bottom .apif-round-img-info .apif-img-round-p-image > img { border-radius: 50%; } .apif-round-image-layout .apif-round-image-block.circle-bottom .apif-round-img-info .apif-img-round-c-like { color: #000; } /* round image Rotate */ .apif-round-image-layout .apif-round-image-block.circle-rotate { border-radius: 50%; height: auto; position: relative; width: 100%; background-color: #fff; } .apif-round-image-layout .apif-round-image-block.circle-rotate .img::before { position: absolute; display: block; content: ''; width: 100%; height: 100%; border-radius: 50%; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .apif-round-image-layout .apif-round-image-block.circle-rotate { border-radius: 50%; height: auto; position: relative; width: 100%; } .apif-round-image-layout .apif-round-image-block .img img.img-thumb { border-radius: 50%; /*height: auto;*/ /*height: 352px;*/ object-fit: cover; width: 100%; top: 3px; position: relative; } .apif-round-image-layout .apif-round-image-block.circle-rotate { box-sizing: border-box; padding: 10px; } .apif-round-image-layout .apif-round-image-block.circle-rotate .apif-round-img-info { transform: translateX(0%); opacity: 0; transition: all 0.35s ease-in-out 0s; } .apif-round-image-layout .apif-round-image-block.circle-rotate .apif-round-img-info { backface-visibility: hidden; border-radius: 100%; bottom: 0px; left: 0px; position: absolute; right: 0px; text-align: center; top: 0px; z-index: 1; background: #f1f1f1; height: 100%; width: 100%; border: 2px solid #ddd; -webkit-box-sizing: border-box; /* Android ≤ 2.3, iOS ≤ 4 */ -moz-box-sizing: border-box; /* Firefox ≤ 28 */ box-sizing: border-box; /* Chrome, Firefox 29+, IE 8+, Opera, Safari 5.1 */ } .apif-round-image-layout .apif-round-image-block .apif-round-img-info .apif-user-name{ font-size: 16px; font-weight: 600; display: block; margin-top: 10px; } .apif-round-image-layout .apif-round-image-block.circle-rotate a { display: block; } .apif-round-image-layout .apif-round-image-block.circle-rotate .img { border-radius: 50%; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; position: relative; } .apif-round-image-layout .apif-round-image-block.circle-rotate .img { -webkit-transform: scale(1) translateX(0); -moz-transform: scale(1) translateX(0); -ms-transform: scale(1) translateX(0); -o-transform: scale(1) translateX(0); transform: scale(1) translateX(0); } .apif-round-image-layout:hover .apif-round-image-block.circle-rotate .img { -webkit-transform: rotate(90deg) translateX(-50%); -moz-transform: rotate(90deg) translateX(-50%); -ms-transform: rotate(90deg) translateX(-50%); -o-transform: rotate(90deg) translateX(-50%); transform: rotate(90deg) translateX(-50%); opacity: 0; } .apif-round-image-layout:hover .apif-round-image-block.circle-rotate .apif-round-img-info { opacity: 1; transform: translateX(0px); } .apif-round-image-layout:hover .apif-round-image-block.circle-rotate > a:not(.btn) { display: block; } .apif-round-image-layout .apif-round-image-block.circle-rotate .apif-round-img-info .apif-img-round-p-image { display: inline-block; width: 50px; height: 50px; clear: both; } .apif-round-image-layout .apif-round-image-block .apif-round-img-info .apif-img-round-p-image > img { border-radius: 50%; border: 2px solid #ccc; height: auto; max-width: 100%; } .apif-round-image-layout .apif-round-image-block .apif-round-img-info .apif-img-round-c-like { color: #000; } .apif-round-image-layout .apif-round-image-block .apif-round-img-info{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items: center; -webkit-justify-content: center; justify-content: center; height: 100%; } /* round image Rotatey */ .apif-round-image-layout .apif-round-image-block.circle-rotatey { border-radius: 50%; height: auto; position: relative; width: 100%; background-color: #fff; } .apif-round-image-layout .apif-round-image-block.circle-rotatey .img::before { position: absolute; display: block; content: ''; width: 100%; height: 100%; border-radius: 50%; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .apif-round-image-layout .apif-round-image-block.circle-rotatey { border-radius: 50%; /*height: auto;*/ position: relative; width: 100%; } .apif-round-image-layout .apif-round-image-block.circle-rotatey .img img.img-thumb { border-radius: 50%; /*height: auto;*/ width: 100%; } .apif-round-image-layout .apif-round-image-block.circle-rotatey { box-sizing: border-box; padding: 10px; } .apif-round-image-layout .apif-round-image-block.circle-rotatey .apif-round-img-info { transform: translateX(0%); opacity: 0; transition: all 0.35s ease-in-out 0s; } .apif-round-image-layout .apif-round-image-block.circle-rotatey .apif-round-img-info { backface-visibility: hidden; border-radius: 100%; bottom: 0px; left: 0px; position: absolute; right: 0px; text-align: center; top: 0px; z-index: 1; background: #f1f1f1; height: 100%; width: 100%; border: 2px solid #ddd; -webkit-box-sizing: border-box; /* Android ≤ 2.3, iOS ≤ 4 */ -moz-box-sizing: border-box; /* Firefox ≤ 28 */ box-sizing: border-box; /* Chrome, Firefox 29+, IE 8+, Opera, Safari 5.1 */ } .apif-round-image-layout .apif-round-image-block.circle-rotatey a { display: block; } .apif-round-image-layout .apif-round-image-block.circle-rotatey .img { border-radius: 50%; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; position: relative; } .apif-round-image-layout .apif-round-image-block.circle-rotatey .img { -webkit-transform: scale(1) translateX(0); -moz-transform: scale(1) translateX(0); -ms-transform: scale(1) translateX(0); -o-transform: scale(1) translateX(0); transform: scale(1) translateX(0); } .apif-round-image-layout:hover .apif-round-image-block.circle-rotatey .img { -webkit-transform: rotate(-90deg) translateY(-50%); -moz-transform: rotate(-90deg) translateY(-50%); -ms-transform: rotate(-90deg) translateY(-50%); -o-transform: rotate(-90deg) translateY(-50%); transform: rotate(-90deg) translateY(-50%); opacity: 0; } .apif-round-image-layout:hover .apif-round-image-block.circle-rotatey .apif-round-img-info { opacity: 1; transform: translateX(0px); } .apif-round-image-layout:hover .apif-round-image-block.circle-rotatey > a:not(.btn) { display: block; } .apif-round-image-layout .apif-round-image-block.circle-rotatey .apif-round-img-info .apif-img-round-p-image { display: inline-block; width: 50px; height: 50px; clear: both; margin-top: 20px; } .apif-round-image-layout .apif-round-image-block.circle-rotatey .apif-round-img-info .apif-img-round-p-image > img { border-radius: 50%; } .apif-round-image-layout .apif-round-image-block.circle-rotatey .apif-round-img-info .apif-img-round-c-like { color: #000; } /* round image Rotatey */ .apif-round-image-layout .apif-round-image-block.circle-rotateyrs { border-radius: 50%; height: auto; position: relative; width: 100%; background-color: #fff; } .apif-round-image-layout .apif-round-image-block.circle-rotateyrs .img::before { position: absolute; display: block; content: ''; width: 100%; height: 100%; border-radius: 50%; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .apif-round-image-layout .apif-round-image-block.circle-rotateyrs { border-radius: 50%; height: auto; position: relative; width: 100%; } .apif-round-image-layout .apif-round-image-block.circle-rotateyrs .img img.img-thumb { border-radius: 50%; height: auto; width: 100%; } .apif-round-image-layout .apif-round-image-block.circle-rotateyrs { box-sizing: border-box; padding: 10px; } .apif-round-image-layout .apif-round-image-block.circle-rotateyrs .apif-round-img-info { transform: translateX(0%); opacity: 0; transition: all 0.35s ease-in-out 0s; } .apif-round-image-layout .apif-round-image-block.circle-rotateyrs .apif-round-img-info { backface-visibility: hidden; border-radius: 100%; bottom: 0px; left: 0px; position: absolute; right: 0px; text-align: center; top: 0px; z-index: 1; background: #f1f1f1; height: 100%; width: 100%; border: 2px solid #ddd; -webkit-box-sizing: border-box; /* Android ≤ 2.3, iOS ≤ 4 */ -moz-box-sizing: border-box; /* Firefox ≤ 28 */ box-sizing: border-box; /* Chrome, Firefox 29+, IE 8+, Opera, Safari 5.1 */ } .apif-round-image-layout .apif-round-image-block.circle-rotateyrs a { display: block; } .apif-round-image-layout .apif-round-image-block.circle-rotateyrs .img { border-radius: 50%; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; position: relative; } .apif-round-image-layout .apif-round-image-block.circle-rotateyrs .img { -webkit-transform: scale(1) translateX(0); -moz-transform: scale(1) translateX(0); -ms-transform: scale(1) translateX(0); -o-transform: scale(1) translateX(0); transform: scale(1) translateX(0); } .apif-round-image-layout:hover .apif-round-image-block.circle-rotateyrs .img { -webkit-transform: rotate(90deg) translateY(-50%); -moz-transform: rotate(90deg) translateY(-50%); -ms-transform: rotate(90deg) translateY(-50%); -o-transform: rotate(90deg) translateY(-50%); transform: rotate(90deg) translateY(-50%); opacity: 0; } .apif-round-image-layout:hover .apif-round-image-block.circle-rotateyrs .apif-round-img-info { opacity: 1; transform: translateX(0px); } .apif-round-image-layout:hover .apif-round-image-block.circle-rotateyrs > a:not(.btn) { display: block; } .apif-round-image-layout .apif-round-image-block.circle-rotateyrs .apif-round-img-info .apif-img-round-p-image { display: inline-block; width: 50px; height: 50px; clear: both; margin-top: 20px; } .apif-round-image-layout .apif-round-image-block.circle-rotateyrs .apif-round-img-info .apif-img-round-p-image > img { border-radius: 50%; } .apif-round-image-layout .apif-round-image-block.circle-rotateyrs .apif-round-img-info .apif-img-round-c-like { color: #000; } .apif-round-image-layout .apif-round-image-block .apif-round-img-info .apif-img-round-c-like { font-size: 14px; } /* slider css */ .litbx__overlay { z-index: 99999; } .theme-default .nivoSlider .nivo-caption img { float: left; position: relative; } .theme-bar .nivoSlider .nivo-caption img { float: left; position: relative; } .theme-light .nivoSlider .nivo-caption img { float: left; position: relative; } .theme-dark .nivoSlider .nivo-caption img { float: left; position: relative; } /* sp slide */ .apif-slider-pro .profile-image img { border-radius: 50%; } .sp-thumbnails-container .sp-thumbnail { text-align: center; right: 0; left: 0; background: #f1f1f1; /*padding: 5px;*/ } .sp-thumbnails-container .sp-thumbnail img { transform: scale(1); transition: all 0.2s ease-in-out 0s; } .sp-thumbnails-container .sp-thumbnail:hover img { transform: scale(1.05); } .sp-thumbnails-container .sp-thumbnail .sp-thumbnail-title .profile-image { width: 40px; height: 40px; display: inline-block; } .sp-thumbnails-container .sp-thumbnail .sp-thumbnail-description a { text-decoration: none; } .sp-horizontal .sp-previous-arrow { left: 5px; } .sp-horizontal .sp-next-arrow { right: 5px; } .sp-next-arrow:after, .sp-next-arrow:before, .sp-previous-arrow:after, .sp-previous-arrow:before { width: 20%; } /*.sp-bottom-thumbnails.sp-has-pointer .sp-thumbnail{ display: block; right: 0;}*/ .sp-next-arrow::after, .sp-next-arrow::before, .sp-previous-arrow::after, .sp-previous-arrow::before { background-color: #FF0000 !important; } .pgwSlider .ps-current img { /*min-width: auto;*/ max-width: 100%; } .sp-slides-container .sp-slides img.sp-image { max-width: 100% !important; width: inherit !important; height: inherit; margin-top: 0 !important; margin-bottom: 100px !important; } .sp-slides-container .sp-slide img { max-width: 100% !important; top: 0; right: 0; bottom: 0; left: 0; } .theme-default .nivo-directionNav a { background-color: #000; border-radius: 50%; } /* This is the visible area of you carousel. Set a width here to define how much items are visible. The width can be either fixed in px or flexible in %. Position must be relative! */ .apif-jcarousel { position: relative; overflow: hidden; } /* This is the container of the carousel items. You must ensure that the position is relative or absolute and that the width is big enough to contain all items. */ .apif-jcarousel ul { width: 20000em; position: relative; /* Optional, required in this case since it's a