.megafolio-container,

.megafolio-container-splash{width:100%;  position:relative;

-moz-box-sizing: border-box;

box-sizing: border-box;

-webkit-box-sizing: border-box;

}





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



-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: 20px 20px 20px 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; }

.mega-yellow {background:#f1c40f; }





/*** 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;}

.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; }

.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: normal; 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: 700normal 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;

 font-size:17px;

 line-height:20px;

 font-weight: normal;

 color:#fff;

 margin-top:0px;

 background:rgb(0,0,0);

  background: rgba(0,0,0,0.8);

  -webkit-box-sizing: border-box;

     -moz-box-sizing: border-box;

          box-sizing: border-box;

}

.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;

  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{

  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;

  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;

  opacity: 0.5;

  cursor: pointer;

}



.mega-link:hover,

.mega-view:hover{

  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-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-



******************************************************/





.noborder .mega-entry .mega-entry-innerwrap{border:0px solid #000;}

.noborder .mega-entry .mega-entry-innerwrap{border:0px solid #000;}



.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;



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;

}



.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);

-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;

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-size:14px;

font-weight:700;

text-align:center;

width:60%;

padding:0px 0px 15px;

left:20%;

bottom:40%;

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;

-webkit-transform: translateZ(10);

-webkit-backface-visibility: hidden;

-webkit-perspective: 1000;



}



.mega-hoverview{left:50%; margin-left:33px;

-webkit-transform: translateZ(10);

-webkit-backface-visibility: hidden;

-webkit-perspective: 1000;



}



.mega-hoverlink,

.mega-hoverview{

width:40px; height:40px; position:absolute;

top:50%;

color: rgba(255,255,255,0.75);

background: rgba(255,255,255,0.1);

text-align:center;

margin-top:0px;

cursor:pointer;

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{

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);

opacity: 1;

}



.mega-hover .mega-hoverlink,

.mega-hover .mega-hoverview {

line-height: 40px;

border-radius: 2px;

background: rgba(255, 255, 255, 0.1);

color: rgba(255, 255, 255, 0.75);

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-hoverlink{margin-right:5px;right:50%; }

.mega-hover:hover .mega-hoverview{left:50%;  margin-left:5px;}



.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{background: rgba(255,255,255,.2);

color: white;}

.mega-hover.notitle .mega-hoverlink,

.mega-hover.notitle .mega-hoverview{ margin-top: -16px; }









/******************************

-THE FILTERS-

********************************/

.clear{clear:both;}

.filter_padder{ 

margin: 20px auto 20px;

box-sizing:border-box;

-moz-box-sizing:border-box;

-webkit-box-sizing:border-box;

width:100%;

}



.filter_wrapper{

padding: 0px;

position: relative;

min-height: 40px;

margin: auto;

border: 1px solid rgba(0, 0, 0, 0.05);

display: inline-block;}





.filter_wrapper.floated{float:left;margin-right:50px;}





.filter_list_wrapper{width:150px;

position:relative;

margin:auto;

}

.filter{

position: relative;

line-height: 40px;

font-size: 14px;

padding: 0 15px;

color: #999;

float: left;

text-transform: uppercase;

cursor: pointer;

}





.filter:hover, .filter.selected{color:#000;}

.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;}





.su-portfolio.sup-style1 .filter {

  padding-right: 15px;

}

.su-portfolio.sup-style1 .filter:first-child {

padding-left: 15px;

}

.su-portfolio.sup-style2 .filter {

color: #000;

margin-right: 5px;

line-height: 30px;

}



.su-portfolio.sup-style2 .filter:after {

content: "";

width: 0%;

height: 3px;

bottom: 0;

left: 0;

top: auto;

background: #000;

position: absolute;

-webkit-transition: all 300ms cubic-bezier(0.175,0.885,0.32,1.275);

-moz-transition: all 300ms cubic-bezier(0.175,0.885,0.32,1.275);

-ms-transition: all 300ms cubic-bezier(0.175,0.885,0.32,1.275);

-o-transition: all 300ms cubic-bezier(0.175,0.885,0.32,1.275);

}

.su-portfolio.sup-style2 .filter:hover::after, .filter.selected::after{width: 100%;}

.su-portfolio.sup-style2 .filter_wrapper {

border: 0;

}

.su-portfolio.sup-style2 .filter:hover,.su-portfolio.sup-style2 .filter.selected{color:#000;}



.su-portfolio.sup-style3 .filter_wrapper {

background: none;

border: 0;

line-height: 30px;

padding: 0;

}



.su-portfolio.sup-style3 .filter {

border: 3px solid transparent;

font-weight: 700;

filter: aplha(opacity: 100);

-webkit-transition: all 0.3s;

-moz-transition: all 0.3s;

-ms-transition: all 0.3s;

-o-transition: all 0.3s;

transition: all 0.3s;

-webkit-transform: translate(0, 0);

-moz-transform: translate(0, 0);

-ms-transform: translate(0, 0);

-o-transform: translate(0, 0);

transform: translate(0, 0);

margin-right: 5px;

padding: 0 15px;

}

.su-portfolio.sup-style3 .filter:hover,.su-portfolio.sup-style3 .filter.selected{

  border: 3px solid #000;

  color: #000;

  font-weight: 700;

  -webkit-transform: translate(0, -3px);

  -moz-transform: translate(0, -3px);

  -ms-transform: translate(0, -3px);

  -o-transform: translate(0, -3px);

  transform: translate(0, -3px);

}



.su-portfolio.sup-style3 .mega-hover .mega-hoverlink, 

.su-portfolio.sup-style3 .mega-hover .mega-hoverview {

  background: rgba(255,255,255,0.1);

  color: rgba(255,255,255,0.75);



}



.su-portfolio.sup-style3 .mega-hover .mega-hoverlink:hover, 

.su-portfolio.sup-style3 .mega-hover .mega-hoverview:hover {

  background: rgba(255,255,255,0.2);

  color: rgba(255,255,255,1);

}







.su-portfolio.sup-style4 .filter_wrapper {

  background: none;

  border-radius: 0;

  line-height: 30px;

  padding: 0;

  list-style: none;

  border: 1px solid rgba(0,0,0,.07);

  border-radius: 4px;

  display: inline-block;

  overflow: hidden;

}





.su-portfolio.sup-style4 .filter {

  display: block;

  position: relative;

  padding: 12px 18px;

  font-size: 13px;

  line-height: 15px;

  color: #666;

  border-left: 1px solid rgba(0,0,0,.07);

  margin-right: 0;

}



.su-portfolio.sup-style4 .filter:hover {

color: #1ABC9C;

}

.su-portfolio.sup-style4 .filter.selected{

  color: #FFF;

  background-color: #1ABC9C;

  margin: -1px 0;

  padding: 13px 18px;

  font-weight: 700;

}









@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;}







.rollover-content .entry-title {

    color: #fff;

    font-size: 19px;

    margin-bottom: 5px;

    line-height: 20px;  

}

.rollover-content .entry-meta {

    color: rgba(255,255,255,0.5) !important;

    -webkit-text-fill-color: rgba(255,255,255,0.5) !important;

    font-size: 11px;

    line-height: 11px;

    text-transform: uppercase;

}



.rollover-content .portfolio-categories,

.rollover-content .su-portfolio-date {

    display: inline-block;

    position: relative;

}

.rollover-content .su-portfolio-date .su-pdate {

    margin-right: 15px;

}

.rollover-content .su-portfolio-date:after {

    content: "/";

    position: absolute;

    right: 5px;

    top: 0;

}



.rollover-content {

    top: auto;

    bottom: 0;

    height: auto;

    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(0,0,0,0)),rgba(0,0,0,0.2) 10%,color-stop(100%,rgba(0,0,0,0.6)));

    background: -ms-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.1) 10%,rgba(0,0,0,0.6) 100%);

    background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0.1) 20%,rgba(0,0,0,0.8) 100%);

    background-color: transparent!important;

    color: #fff;

    text-align: center;

}





.links-container .hoverlink {

    position: relative;

    display: inline-block;

    float: none;

    width: 46px;

    height: 46px;

    padding: 0;

    margin: 5px 5px;

    background-image: none;

    border-radius: 50%;

}



.links-container {

    opacity: 0;text-align: center;

    position: absolute;

    top: 50%;

    left: 50%;

    margin-top: -28px;

    margin-left: -57px;

    -webkit-transition: all .25s ease;

    -moz-transition: all .25s ease;

    -ms-transition: all .25s ease;

    -o-transition: all .25s ease;

    transition: all .25s ease;

    -webkit-transform: translateY(-20px);

    -moz-transform: translateY(-20px);

    -ms-transform: translateY(-20px);

    -o-transform: translateY(-20px);

    transform: translateY(-20px);

    z-index: 5;	

}

.mega-entry:hover .links-container {

	opacity: 1;

	-webkit-transform: translateY(0px);

	-moz-transform: translateY(0px);

	-ms-transform: translateY(0px);

	-o-transform: translateY(0px);

	transform: translateY(0px);

}

.links-container .hoverlink i {

    width: 100%;

    height: 100%;

    background: rgba(171, 171, 171, 0.8);

    color: #FFF;

    vertical-align: top;

    line-height: 46px;

    font-size: 16px;

    border-radius: 50%;

}



.links-container .hoverlink > span {

    display: block;

    position: absolute;

    width: 100%;

    height: 100%;

    left: -2px;

    top: -2px;

    border-radius: 50%;

    -webkit-transition: opacity 0s ease,-webkit-transform 0s ease,border 0s ease;

    -moz-transition: opacity 0s ease,-moz-transform 0s ease,border 0s ease;

    -o-transition: opacity 0s ease,-o-transform 0s ease,border 0s ease;

    transition: opacity 0s ease,transform 0s ease,border 0s ease;

    border: 2px solid rgba(255,255,255,0.38);

    opacity: 1;

    visibility: hidden;

}



.links-container .hoverlink:hover > span {

    visibility: visible;

     opacity:0; 

    -webkit-transform: scale(1.3);

    -mox-transform: scale(1.3);

    -o-transform: scale(1.3);

    transform: scale(1.3);

    -webkit-transition-duration: .5s;

    -moz-transition-duration: .5s;

    -o-transition-duration: .5s;

    transition-duration: .5s;

}





.mega-entry .mega-entry-innerwrap:before {

  content: '';

  position: absolute;

  width: 100%;

  height: 100%;

  -webkit-transition: all .25s ease;

  -moz-transition: all .25s ease;

  -ms-transition: all .25s ease;

  -o-transition: all .25s ease;

  transition: all .25s ease;

}



.mega-entry:hover .mega-entry-innerwrap:before {

  background: rgba(0, 0, 0, 0.2);

}



/*.megasize-small .rollover-content-container,

.megasize-medium .rollover-content-container,

.megasize-small .mega-hovertitle,

.megasize-medium .mega-hoversubtitle {

  display: none;

}*/





/* *****************************************************

    Entry Size related setting

********************************************************/



.megasize-large .rollover-content .entry-title {

    font-size: 20px;

    line-height: 24px;

    font-weight: 600;

    margin-bottom: 10px;

}

.megasize-medium .rollover-content .entry-title {

    font-size: 16px;

    line-height: 18px;

    font-weight: 600;

}

.megasize-small .rollover-content .entry-title {

    font-size: 14px;

    line-height: 16px;

}

.megasize-small .rollover-content .su-portfolio-date {

    display: none;

}









.megasize-medium .rollover-content .portfolio-categories {

  margin-bottom: -5px;

}



.su-portfolio.sup-style3 .mega-hoverview {

  margin-left: 5px !important;

}

.su-portfolio.sup-style3 .mega-hoverlink {

  margin-right: 5px !important;

}







/* Style 4 */

.portfolio-style4 .portfolio-content {

  padding: 20px;

  color: #fff;

}

.portfolio-style4 .mega-entry-innerwrap {

  overflow: hidden;

  -webkit-transition: background 1s ease-in-out;

  -moz-transition: background 1s ease-in-out;

  transition: background 1s ease-in-out;

}

.portfolio-style4.mega-entry:hover .mega-entry-innerwrap:before {

  background: rgba(0, 0, 0, 0.3);

}

.portfolio-style4:hover .mega-entry-innerwrap {

  background-position-Y: 90% !important;

}

.portfolio-style4.mega-portrait .mega-entry-innerwrap {

  background-position-x: 0 !important;

}

.portfolio-style4.mega-portrait:hover .mega-entry-innerwrap {

  background-position-X: 100% !important;

}

.portfolio-style4 .portfolio-title {

  position: relative;

  overflow: hidden;

  padding: 0 0 10px;

  font-size: 18px;

}

.portfolio-style4 .portfolio-title:after {

    position: absolute;

    content: "";

    bottom: 0;

    left: 0;

    width: 100%;

    height: 2px;

    background: #fff;

    -webkit-transition: -webkit-transform 0.35s;

    transition: transform 0.35s;

    -webkit-transform: translate3d(-100%,0,0);

    transform: translate3d(-100%,0,0);

}



.portfolio-style4:hover .portfolio-title::after {

    -webkit-transform: translate3d(0,0,0);

    transform: translate3d(0,0,0);

}





.portfolio-style4 .portfolio-desc {

    padding-top: 5px;

    opacity: 0;

    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;

    transition: opacity 0.35s, transform 0.35s;

    -webkit-transform: translate3d(100%,0,0);

    transform: translate3d(100%,0,0);

}

.portfolio-style4:hover .portfolio-desc{

    opacity: 1;

    -webkit-transform: translate3d(0,0,0);

    transform: translate3d(0,0,0);

}



.portfolio-links {

  position: absolute;

  bottom: -45px;

  top: auto;

  left: 0;

  z-index: 5;

  -webkit-transition: all .3s ease-in-out;

  -moz-transition: all .3s ease-in-out;

  transition: all .3s ease-in-out;

}

.portfolio-style4:hover .portfolio-links {

  bottom: 0;

}

.portfolio-links a {

  width: 40px;

  height: 40px;

  display: block;

  line-height: 40px;

  font-size: 16px;

  background: rgba(255,255,255,0.1);

  color: rgba(255,255,255,0.75);

  float: left;

  text-align: center;

}



.portfolio-links a.portfolio-link {

  margin-left: 1px;

}

.portfolio-links a:hover {

  background: rgba(255,255,255,0.2);

  color: rgba(255,255,255,1);

}