/*-----------------------------------------------------------------------------

  -  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      {  margin-left: -5px;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:40%;  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      {    margin:40px auto 30px;
margin-top: 15px;
 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                {



font-size: 11px;
margin-right: 3px;
padding: 4px 8px;
background-color: #3a3a3a;
border: 0px solid #3a3a3a;
border-radius: 0px;
color: #ffffff;
cursor:pointer;












}
.filter:hover, .filter.selected    {  background-color: #99cc66;
border-color: #99cc66;
color: #ffffff; text-decoration: none}
.filter.last-child          {  margin-right:0px !important;}



.filter_list_button          {                      display:none;

                    background-color:#888;
                    padding:0px 0px 0px 0px;
                    position:relative;
                    height:30px;
                    line-height: 30px;
                    margin:auto;
                    z-index:1;
                    color: #ffffff;
                    cursor:pointer;
                    font-size: 12px;
                    text-align: center;

                  }

ul.filter_list             {  background-color:#3a3a3a;
                    padding:0px 0px 0px 0px;
                    position:absolute;
                    z-index:10;
                    width:100%;
                    display:none;
                    color: #ffffff;
                    cursor:pointer;
                    margin: 0px;
                    list-style: none;
                  }


li.filter              {  list-style:none;border-top: 1px solid #fff;border-left: 1px solid #fff;border-right: 1px solid #fff;
 background:#888;line-height:30px; font-size:12px; color:#fff;  font-weight:400; cursor:pointer; float:none; margin-right:0px !important;}
.current-filter            {   font-size:12px; color:#fff;  font-weight:400; 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;}