/*-----------------------------------------------------------------------------
- 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:url(../assets/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(../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;}