/**************************** - FANCY BOX TRICKS - *****************************/ .fancybox-lock .fancybox-overlay { overflow-x: auto; overflow-y: hidden !important; } /************************************************ - BASIC CAPTIONS AND COVERS PER mega-entry - ************************************************/ .mega-covercaption { padding:21px 20px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; width:100%; position:absolute; left:0px; min-height:0px; max-width:100%; max-height:100%; overflow:hidden; } .mega-white { background:#fff; } .mega-white.mega-transparent { background:rgba(255,255,255,0.80) } .mega-black { background:#000; } .mega-black.mega-transparent { background:rgba(0,0,0,0.80) } .mega-turquoise { background:#43a1a9; } .mega-orange { background:#de921a; } .mega-green { background:#9ab534; } .mega-red { background:#d74f35; } .mega-violet { background:#791869; } .mega-blue { background:#034e92; } /*** THE DIRECTIONS OF CAPTIONS **/ .mega-square .mega-square-top { top:0px; left:0px; bottom:auto;} .mega-square .mega-square-bottom { bottom:0px; left:0px;top:auto;} .mega-square .mega-square-left { top:0px; left:0px; max-width:50%; height:100% } .mega-square .mega-square-right { top:0px; right:0px; left:auto; width:50%; height:100% } .mega-portrait .mega-portrait-top { top:0px; left:0px; bottom:auto;} .mega-portrait .mega-portrait-bottom { bottom:0px; left:0px;top:auto;} .mega-portrait .mega-portrait-left { top:0px; left:0px; width:50%; height:100% } .mega-portrait .mega-portrait-right { top:0px; right:0px; left:auto; width:50%; height:100% } .mega-landscape .mega-landscape-top { top:0px; left:0px; bottom:auto;} .mega-landscape .mega-landscape-bottom { bottom:0px; left:0px;top:auto;} .mega-landscape .mega-landscape-left { top:0px; left:0px; width:50%; height:100% } .mega-landscape .mega-landscape-right { top:0px; right:0px; left:auto; width:50%; height:100% } .mega-title { text-align: left; font-size:24px; line-height: 24px; color:#fff; font-weight:400; } .mega-title>a { border: none !important; } .mega-date { text-align: left; font-size:15px; color:#fff; font-weight:300; margin-top: 0px;} .mega-covercaption p { text-align: left; font-size:13px; color:#fff; font-weight:400; margin-top:12px; } .mega-covercaption a.read-the-whole-story { color: #fff; text-decoration: none; } .mega-covercaption a:hover { text-decoration: none; border-bottom: 0; } .page-template-page-megafolio-php .mega-withsocialbar.mega-covercaption { margin-bottom: 40px; } .mega-smallcaptions .mega-title { font-size:18px; font-weight:700; text-transform: uppercase; } .mega-smallcaptions .mega-date { font-size:12px; font-weight:400; text-transform: uppercase; color:#fff; } .mega-white .mega-title { color:#222222;} .mega-white .mega-date { color:#222222;} .mega-white p { color:#222222;} .mega-white.mega-covercaption a { color: #555; text-decoration: none; } .mega-white.mega-covercaption a:hover { text-decoration: none; border-bottom: 0; } .mega-black .mega-title { color:#fff;} .mega-black .mega-date { color:#fff;} .mega-black p { color:#fff;} .mega-turquoise .mega-title, .mega-turquoise .mega-date, .mega-turquoise p { color:#fff;} .mega-orange .mega-title, .mega-orange .mega-date, .mega-orange p { color:#fff;} .mega-green .mega-title, .mega-green .mega-date, .mega-green p { color:#fff;} .mega-red .mega-title, .mega-red .mega-date, .mega-red p { color:#fff;} .mega-violet .mega-title, .mega-violet .mega-date, .mega-violet p { color:#fff;} .mega-blue .mega-title, .mega-blue .mega-date, .mega-blue p { color:#fff;} .fatcaption-top { position: absolute; top: 0; width: 100%; text-align:center; padding: 15px 0px; font-size:14px; line-height:20px; font-weight: 700; color:#fff; margin-top:0px; background:rgb(0,0,0); background: rgba(0,0,0,0.8); } .fatcaption-bottom { position: absolute; bottom: 0; width: 100%; text-align:center; padding: 15px 0px; font-size:14px; line-height:20px; font-weight: 700; color:#fff; margin-top:0px; background:rgb(0,0,0); background: rgba(0,0,0,0.8); } .gallerycaption-bottom { position: absolute; bottom: 0; width: 100%; text-align:center; padding: 15px 0px; font-size:17px; line-height:20px; font-weight: 700; color:#fff; margin-top:0px; background:rgb(0,0,0); background: rgba(0,0,0,0.8); } .gallerysubline { width: 100%; text-align:center; font-size:13px; line-height:20px; font-weight: 400; color:#ccc; margin-top:2px; } /** SET THE CAPTION SETTIGS UNDER LOWSIZE ENTRIES **/ .mega-lowsize .mega-covercaption p { display:none;} .mega-lowsize .mega-title { font-size:18px;} .mega-lowsize .mega-date { font-size:13px;} /******************************** - CAPTION NORMAL LINKS *********************************/ .mega-coverbuttons { max-width:68px;max-height:34px;position:absolute; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0.0; -khtml-opacity: 0.0; opacity: 0.0; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; left:0px !important;top:0px !important;bottom:auto !important } .mega-entry-innerwrap:hover .mega-coverbuttons { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } .mega-entry-innerwrap>div:first-child{ width:100%; height:100%; background-color: transparent; background-color:rgba(0,0,0,0); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .mega-entry-innerwrap:hover>div:first-child { background-color: transparent; background-color:rgba(0,0,0,0.2); } .mega-link { background-image:url(../images/megafolio/link_clean.png); background-repeat: no-repeat; background-position: center center; width:34px;height:34px;float:left; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; cursor: pointer; } .mega-view { background-image:url(../images/megafolio/zoom_clean.png); background-repeat: no-repeat; background-position: center center; width:34px;height:34px;float:left; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; cursor: pointer; } .mega-link:hover, .mega-view:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } /********************************************* - SOCIAL BAR AT THE BOTTOM PER mega-entry - ***********************************************/ .mega-square .mega-square-bottom.mega-withsocialbar, .mega-portrait .mega-portrait-bottom.mega-withsocialbar, .mega-landscape .mega-landscape-bottom.mega-withsocialbar { padding-bottom:25px;} .mega-socialbar { position:absolute; height:40px; z-index:10; bottom:0px; margin-left:0px; margin-right:0px; left:0px; right:0px; box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; border-top:0; border-bottom:0; border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; padding-right:10px; overflow:hidden; background-color: #000; background-color: rgba(0,0,0,0.8); } .mega-socialbar>span,.mega-socialbar>a { text-align:left; padding:0 0 0 10px; display: block; line-height:40px; font-size:14px; color:#fff !important; text-decoration:none !important; font-weight:400; -webkit-transition: all .4s; transition: all .4s;} .mega-socialbar>a:hover { opacity:0.5; -moz-opacity:0.5; -webkit-opacity:0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); } .post-format { background-color: #0066ff; width:20px; text-align: center !important; } .mega-socialbar .fa-facebook,.mega-socialbar .fa-twitter { border-right: 1px solid #fff; border-right: 1px solid rgba(255,255,255,0.2); padding-right: 12px; } .mega-socialbar .fa-heart { color: #ff1919; } .mega-socialbar .post-format { padding-right: 10px; } .post-comment-count span, .blog-like-link span { font-size:12px !important; } .mega-soc { padding-right: 0 !important; } .mega-leftfloat { float:left;margin-right:5px;} .mega-rightfloat { float:right;} .ie8 .mega-socialbar .mega-rightfloat, .ie9 .mega-socialbar .mega-rightfloat { margin-right:25px;} /**************************************************** - BASIC SETTINGS FOR GALLERY GRIDS - ******************************************************/ .mega-entry .mega-entry-innerwrap { border:5px solid #fff; } .noborder .mega-entry .mega-entry-innerwrap { border:0px solid #fff;} .noborder .mega-entry .mega-entry-innerwrap { border:0px solid #fff;} .light-bg-entries .mega-entry .mega-entry-innerwrap { background-color:#000 !important;} .dark-bg-entries .mega-entry .mega-entry-innerwrap { background-color:rgb(0,0,0) !important; background-color:rgba(0,0,0,0.3) !important;} .mega-entry { -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-sizing: border-box; position:absolute; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease-out; -o-transition: all 0.6s ease-out; -ms-transition: all 0.6s ease-out; -webkit-transform: translateZ(10); -webkit-backface-visibility: hidden; -webkit-perspective: 1000; z-index:2; } .mega-entry .mega-entry-innerwrap { width:100%;height:100%;position:relative;overflow:visible;z-index:2; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-sizing: border-box; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -webkit-transform: translateZ(10); -webkit-backface-visibility: hidden; -webkit-perspective: 1000; } .ie8 .mega-entry, .ie8 .mega-entry .mega-entry-innerwrap, .ie9 .mega-entry, .ie9 .mega-entry .mega-entry-innerwrap { overflow:hidden;} .mega-entry-innerwrap.pagetop { -webkit-transform-origin: 50% 0% 0; -moz-transform-origin: 50% 0% 0; transform-origin: 50% 0% 0; } .mega-entry-innerwrap.pagebottom { -webkit-transform-origin: 50% 100% 0; -moz-transform-origin: 50% 100% 0; transform-origin: 50% 100% 0; } .mega-entry-innerwrap.pagemiddle { -webkit-transform-origin: 50% 50% 0; -moz-transform-origin: 50% 50% 0; transform-origin: 50% 50% 0; } .megafolio-container.norounded .mega-entry .mega-entry-innerwrap { border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px; } .megafolio-container-splash.norounded .mega-entry .mega-entry-innerwrap { border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px; } .mega-lightbox, .oldmegalightbox { position:absolute; overflow:hidden;box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.6);border:1px solid #333; z-index:1000; padding:100px; background: url(../images/megafolio/grain.png) repeat; background-color:rgba(20,20,20,0.9); margin-left:-100px; margin-top:-100px;} .mega-lightbox .mediaholder, .oldmegalightbox .mediaholder { border:2px solid #fff; position: relative; width:100%; height:100%;box-shadow: 0px 0px 3px 1px rgba(40,40,40,0.6);} /** IE HACKS **/ .ieimg { position:absolute; width:100%; top:0px; left:0px;z-index:0;} .mega-mega-entry-added { visibility: hidden; } .mega-mega-entry-added .mega-socialbar, .mega-mega-entry-added .mega-covercaption { visibility: hidden} /********************************************************* - MEGA PORTFOLIO HOVER EFFECTS - **********************************************************/ /**************************** - BASIC SETTINGS - *****************************/ .mega-hover { width:100%;height:100%;position:absolute; background: url(../images/megafolio/grain.png) repeat; background-color:rgba(0,0,0,0.5); border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .norounded .mega-hover { border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px;} .mega-divider { position:absolute;top:50%; width:80%; left:10%; border-bottom:1px dashed #7b7c7e;border-top:1px dashed #111; } .mega-hovertitle, .mega-hoverlink, .mega-hoverview { -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; transition-delay: 0.2s; -moz-transition-delay: 0.2s; /* Firefox 4 */ -webkit-transition-delay: 0.2s; /* Safari and Chrome */ -o-transition-delay: 0.2s; /* Opera */ } .mega-hovertitle { position:absolute; color:#fff !important; font-family: 'Open Sans', sans-serif; font-size:18px; font-weight:700; text-align:center; width:60%; padding:0px 0px 15px; left:20%; bottom:40%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .mega-hovertitle .mega-hoversubtitle { color:#FF0; font-size:12px; line-height:13px; font-weight: 400; margin-top: 5px;} .mega-hoverlink { right:50%; margin-right:33px; -webkit-transform: translateZ(10); -webkit-backface-visibility: hidden; -webkit-perspective: 1000; } .mega-hoverlink:after { font-family: "FontAwesome"; content: "\f0c1"; } .mega-hoverview { left:50%; margin-left:33px; -webkit-transform: translateZ(10); -webkit-backface-visibility: hidden; -webkit-perspective: 1000; } .mega-hoverview:after { font-family: "FontAwesome"; content: "\f067"; } .mega-hoverlink, .mega-hoverview { width:33px; height:33px; position:absolute; border:1px solid #FFF; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; line-height:33px; font-size: 14px; color: #fff; top:50%; text-align:center; margin-top:0px; cursor:pointer; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .mega-hover.alone .mega-hoverview { margin-left:-16px; margin-top: -20px; } .mega-hover.alone .mega-hoverlink { margin-right:-16px; margin-top: -20px; } /******************************** - THE HOVER EFFECT - **********************************/ .mega-hover:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; transition-delay: 0.1s; -moz-transition-delay: 0.1s; /* Firefox 4 */ -webkit-transition-delay: 0.1s; /* Safari and Chrome */ -o-transition-delay: 0.1s; /* Opera */ } .mega-hover:hover .mega-hovertitle { bottom:50%; transition-delay: 0.1s; -moz-transition-delay: 0.1s; /* Firefox 4 */ -webkit-transition-delay: 0.1s; /* Safari and Chrome */ -o-transition-delay: 0.1s; /* Opera */} .mega-hover:hover .mega-hovertitle, .mega-hover:hover .mega-hoverlink, .mega-hover:hover .mega-hoverview { transform:rotate(0deg); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } .mega-hover:hover .mega-hoverlink { right:50%; margin-right:5px;transition-delay: 0.1s; -moz-transition-delay: 0.1s; /* Firefox 4 */ -webkit-transition-delay: 0.1s; /* Safari and Chrome */ -o-transition-delay: 0.1s; /* Opera */} .mega-hover:hover .mega-hoverview { left:50%; margin-left:5px;transition-delay: 0.1s; -moz-transition-delay: 0.1s; /* Firefox 4 */ -webkit-transition-delay: 0.1s; /* Safari and Chrome */ -o-transition-delay: 0.1s; /* Opera */} .mega-hover.alone:hover .mega-hoverview { margin-left:-16px; margin-top: 0px; } .mega-hover.notitle.alone:hover .mega-hoverview { margin-left:-16px; margin-top: -16px; } .mega-hover.notitle.alone:hover .mega-hoverlink { margin-right:-16px; margin-top: -16px; } .mega-hover:hover .mega-hoverlink:hover, .mega-hover:hover .mega-hoverview:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); -moz-opacity: 0.6; -khtml-opacity: 0.6; opacity: 0.6; } .mega-hover.notitle .mega-hoverlink, .mega-hover.notitle .mega-hoverview { margin-top: -16px; } /****************************** - THE FILTERS - ********************************/ .clear { clear:both;} .filter_padder { padding:0px 30px; margin:40px auto 30px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; width:100%; } .filter_wrapper { background:url(../images/megafolio/tiles/topgradient.png) repeat-x; background-color:#040404; border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; padding:0px 35px; position:relative; min-height:40px; margin:auto; } .ie9 .filter_wrapper { max-width:650px;} .filter_wrapper.floated { float:left;margin-right:50px;} .filter_list_wrapper { width:150px; position:relative; margin:auto; } .filter { line-height:40px;margin-right:30px; font-size:14px; color:#999; float:left; font-weight:700; cursor:pointer} .filter:hover, .filter.selected { color:#fff;} .filter.last-child { margin-right:0px !important;} .filter_list_button { background: url(../images/megafolio/tiles/list.png) no-repeat 15px center, url(../images/megafolio/tiles/topgradient.png); background-color:#040404; border-radius:20px 20px 20px 20px; -moz-border-radius:20px 20px 20px 20px; -webkit-border-radius:20px 20px 20px 20px; padding:0px 30px 0px 60px;position:relative; min-height:40px; margin:auto; width:100%; z-index:1; } ul.filter_list { background:#040404; padding:0px 45px 0px 45px; position:absolute;z-index:0;width:100%;top:15px; border-radius:0px 0px 20px 20px; -moz-border-radius:0px 0px 20px 20px; -webkit-border-radius:0px 0px 20px 20px; display:none; list-style: none; } li.filter { list-style:none;max-width:156px;background:#040404;line-height:30px; font-size:14px; color:#999; font-weight:700; cursor:pointer; float:none; margin-right:0px !important;} .current-filter { max-width:156px;line-height:40px; font-size:14px; color:#999; font-weight:700; cursor:pointer; float:none; margin-right:0px !important;} .filter_wrapper_list li.filter:hover, .current-filter, .filter_wrapper_list li.filter.selected { color:#fff;} @media only screen and (max-width: 961px) { .filter_wrapper.floated { margin:auto; float:none;} .filter_list_wrapper { width:216px; float:none; clear: both; margin-top: 30px; } } @media only screen and (max-width: 420px) { .filter { float:none; text-align:center;margin-right:0px;line-height:30px;} } /*********************************************************** - EXAMPLES FOR COLORED BG OF ENTRIES in Example 10 - ************************************************************/ .mega-entry.mega-bg-1 .mega-entry-innerwrap { background-color:#f32390 !important;} .mega-entry.mega-bg-2 .mega-entry-innerwrap { background-color:#d69b12 !important;} .mega-entry.mega-bg-3 .mega-entry-innerwrap { background-color:#7bce8b !important;} .ozy-metro-icon { display: block; float: left; width: 64px; height: 64px; line-height: 64px; font-size: 64px; margin-right: 12px; text-align: center; color: #ffffff; } .megafolio-gallery .mega-entry-innerwrap a { position: relative; display: block; width: 100%; height: 100%; } .megafolio-gallery .mega-entry-innerwrap .fa { display: block; position: absolute; top: 50%; left: 50%; margin-top: -22px; margin-left: -22px; width: 44px; height: 44px; line-height: 44px; text-align: center; font-size: 11px; color: #FFF; border: 1px solid #fff; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; border-radius: 3px; -webkit-border-radius: 3px; -webkit-transition: all .2s; transition: all .2s; } .megafolio-gallery .mega-entry-innerwrap:hover .fa { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } /*********************************************************** - OZY THEME CUSTOM DEFINITIONS - ************************************************************/ .folio-filter-box { position:fixed; cursor:pointer; min-width:130px; z-index:999; right: 20px; top: 80px; } .folio-filter-box * { -webkit-transition: all .2s linear; -moz-transition: all .2s linear; transition: all .2s linear; } .folio-filter-box>span.open, .folio-filter-box>span:hover { background-color: #000 !important; color: #fff !important; } .folio-filter-box a{ text-decoration:none; } #select-folio-filter { display:block; min-width:130px; padding:10px 10px 8px 10px; background-color:#FFF; z-index:2; position: relative; } #select-folio-filter-option li i, #select-folio-filter .fa { padding-right:10px; font-size:14px; } #select-folio-filter-option { width:150px; z-index:1; overflow: hidden; list-style:square; list-style-type:square; height: 0; } #select-folio-filter-option li { list-style:none; padding:5px 10px 5px 11px; } #select-folio-filter-option li:hover { background-color: #000; } #select-folio-filter-option li:hover * { color: #fff; } #select-folio-filter-option li i { padding-right:8px; } /*fix for flickring on loading*/ .mega-socialbar,.mega-covercaption,.load_more_blog{display:none;}