/*----------------------------------------------------------------------------- - Megafolio PRO - Screen Stylesheet version: 1.0 date: 10/10/12 author: themepunch email: info@themepunch.com website: http://www.themepunch.com -----------------------------------------------------------------------------*/ /**************************** - 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-family: 'Open Sans', sans-serif; font-size:24px; line-height: 24px; color:#fff; font-weight:400; } .mega-date { text-align: left; font-family: 'Open Sans', sans-serif; font-size:15px; color:#666; font-weight:300; margin-top: 0px;} .mega-covercaption p { text-align: left; font-family: 'Open Sans', sans-serif; font-size:13px; color:#555; font-weight:400; margin-top:12px; } .mega-covercaption a { color: #fff; text-decoration: none; border-bottom: 1px dotted #fff; } .mega-covercaption a:hover { text-decoration: none; border-bottom: 0; } .mega-withsocialbar.mega-covercaption { margin-bottom: 16px; } .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:#888; } .mega-white .mega-title { color:#000;} .mega-white .mega-date { color:#666;} .mega-white p { color:#555;} .mega-white.mega-covercaption a { color: #555; text-decoration: none; border-bottom: 1px dotted #555; } .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-link { background-image:url(../assets/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=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; cursor: pointer; } .mega-view { background-image:url(../assets/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=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; 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:16px; 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; background:url(../assets/socialbar-bg.png) repeat-x; border-top:0; border-bottom:0; border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; padding:2px 10px; overflow:hidden; } .mega-socialbar span { text-align:left; font-family: 'Open Sans', sans-serif; font-size:11px; color:#777; font-weight:400;line-height:16px; text-shadow:0px 1px 0px #fff;} .mega-soc { cursor:pointer; background-position:left 2px !important; min-width:16px;height:18px; margin-top:-2px;} .mega-soc:hover { background-position:left -14px !important; } .mega-soc span { margin-left:20px;margin-right:20px;} .mega-facebook { background:url(../icons/facebook.png) no-repeat;} .mega-comments { background:url(../icons/comments.png) no-repeat;} .mega-twitter { background:url(../icons/twitter.png) no-repeat;} .mega-more { background:url(../icons/more.png) no-repeat;} .mega-like { background:url(../icons/like.png) no-repeat;} .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:#ccc !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(../assets/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(../assets/grain.png) repeat; background-color:rgba(0,0,0,0.8); 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; font-family: 'Open Sans', sans-serif; font-size:14px; 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:#aaa; font-size:12px; line-height:13px; font-weight: 400; margin-top: 5px;} .mega-hoverlink { right:50%; margin-right:33px; background:url(../assets/link.png) no-repeat center; -webkit-transform: translateZ(10); -webkit-backface-visibility: hidden; -webkit-perspective: 1000; } .mega-hoverview { left:50%; margin-left:33px; background:url(../assets/lupe.png) no-repeat center; -webkit-transform: translateZ(10); -webkit-backface-visibility: hidden; -webkit-perspective: 1000; } .mega-hoverlink, .mega-hoverview { width:33px; height:33px; position:absolute; 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-color:#04040; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; 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(../assets/tiles/list.png) no-repeat 15px center, url(../assets/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;}