/*------------------------------------------------------*/
/*---------------------- Portfolio cromie----------------------*/

@media (max-width: 768px) {
#portfolio-filter {position:relative;margin-left:-40px;list-style:none;float:left;border-radius:4px;background-color:transparent;}
#portfolio-filter li{float:left;position:relative; width:50%; height:40px; border:1px solid #eee; }
#portfolio-filter li a{display:block;position:relative; font-size:14px;line-height:40px;color:#666;text-align:center;text-decoration:none}
#portfolio-filter li a:hover{color:#fff; text-decoration:none}
#portfolio-filter li.activeFilter a{color:#FFF!important;background-color:#333333;margin:0 0; font-weight:normal;text-decoration:none}
#portfolio-shuffle{float:right;width:41px;height:41px;border:1px solid rgba(0,0,0,0.07);font-size:14px;text-align:center;line-height:41px;color:#333;border-radius:4px;cursor:pointer;-webkit-transition:all .2s linear;-o-transition:all .2s linear;transition:all .2s linear;background-color:#333333}
#portfolio-shuffle:hover{background-color:#5ab24a;color:#FFF;text-shadow:1px 1px 1px rgba(0,0,0,0.2)}
#portfolio{position:relative;margin:0 -12px -12px 0}
body:not(.device-touch) #portfolio{-webkit-transition:height .4s linear;-o-transition:height .4s linear;transition:height .4s linear}
.portfolio-item {position:relative;float:left;width:276px;margin:0 12px 12px 0}
.portfolio-item {overflow:hidden}
.portfolio-item .portfolio-image{position:relative;overflow:hidden;border:1px solid rgba(0,0,0,0.07)}
.portfolio-item .portfolio-image,.portfolio-item .portfolio-image a,.portfolio-item .portfolio-image img{display:block;width:100%;height:auto;border-radius:5px}
body:not(.device-touch):not(.device-xs):not(.device-xxs) .portfolio-notitle .portfolio-image img{-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.portfolio-desc{z-index:3;padding:15px 5px 10px}
.portfolio-desc h3{margin:0;padding:0;font-size:19px;}
.portfolio-desc h3 a{color:#222}
.portfolio-desc h3 a:hover{color:#5ab24a}
.portfolio-desc span{display:block;margin-top:3px;color:#888}
.portfolio-desc span a{color:#888}
.portfolio-desc span a:hover{color:#000}
.portfolio-overlay{position:absolute;top:0;left:0;width:100%;height:100%; opacity:0;z-index:2;text-align:center;background-color:rgba(255,255,255,0.7)}
body:not(.device-touch):not(.device-xs):not(.device-xxs) .portfolio-overlay{-webkit-transition:opacity .4s ease-in-out;-o-transition:opacity .4s ease-in-out;transition:opacity .4s ease-in-out}
.portfolio-item:hover .portfolio-overlay,.iportfolio:hover .portfolio-overlay{opacity:1}
.portfolio-overlay a{position:absolute;top:50%;left:50%;background-color:#333333;width:40px!important;height:40px!important;margin:-28px 0 0 -44px;font-size:18px;line-height:40px;text-align:center;color:#fff;border-radius:50%;-webkit-backface-visibility:hidden}
body:not(.device-touch):not(.device-xs):not(.device-xxs) .portfolio-overlay a{-webkit-transition:color .2s linear,background-color .2s linear,margin-top .2s linear,opacity .2s linear;-o-transition:color .2s linear,background-color .2s linear,margin-top .2s linear,opacity .2s linear;transition:color .2s linear,background-color .2s linear,margin-top .2s linear,opacity .2s linear}
.portfolio-overlay a.right-icon{left:auto;right:50%;margin-left:0;margin-right:-44px}
.portfolio-overlay a.center-icon{display:block;margin:-20px 0 0 -20px;opacity:0}
.portfolio-item:hover a.center-icon,.iportfolio:hover a.center-icon{opacity:1}
.portfolio-overlay a:hover{color:#fff;background-color:#333}
.portfolio-item:hover .portfolio-overlay a.left-icon,.portfolio-item:hover .portfolio-overlay a.right-icon,.iportfolio:hover .portfolio-overlay a.left-icon,.iportfolio:hover .portfolio-overlay a.right-icon{margin-top:-18px}
.portfolio-overlay a i.icon-line-play{position:relative;left:2px}
.portfolio-overlay .portfolio-desc{position:relative;padding:0!important;margin:0;text-align:center}
.portfolio-overlay .portfolio-desc a{display:inline;position:relative;top:0;left:0;margin:0;font-size:inherit;width:auto!important;height:auto!important;line-height:1;background-color:transparent!important;}
.portfolio-overlay .portfolio-desc h3{font-weight:600;color:#333 !important;line-height:1; margin-top:60px;}
.portfolio-overlay .portfolio-desc h3 a{color:#333 !important}
.portfolio-overlay .portfolio-desc span{margin-top:7px;color:#DDD!important}
.portfolio-overlay .portfolio-desc span a{color:#DDD!important;font-size:inherit}
.portfolio-overlay .portfolio-desc ~ a{display:inline-block;position:relative;top:0;left:0;margin:20px 0 0!important}
body:not(.device-touch):not(.device-xs):not(.device-xxs) .portfolio-overlay .portfolio-desc ~ a{-webkit-transition:color .2s linear,background-color .2s linear,opacity .2s linear;-o-transition:color .2s linear,background-color .2s linear,opacity .2s linear;transition:color .2s linear,background-color .2s linear,opacity .2s linear}
.portfolio-overlay .portfolio-desc ~ a.right-icon{left:0;right:0;margin-left:5px!important;margin-right:0!important}
.portfolio-overlay .portfolio-desc a:hover{background:transparent}
body.device-touch.device-xs .portfolio-notitle .portfolio-overlay,body.device-touch.device-xxs .portfolio-notitle .portfolio-overlay{display:none!important}
}
@media (min-width: 768px) {
#portfolio-filter {position:relative;margin-left:-40px;list-style:none;float:left;border-radius:4px;background-color:transparent;}
#portfolio-filter li{float:left;position:relative;}
#portfolio-filter li a{display:block;position:relative;padding:13px 18px;font-size:14px;line-height:15px;color:#666;border-top:1px solid rgba(0,0,0,0.25);border-right:1px solid rgba(0,0,0,0.25);border-bottom:1px solid rgba(0,0,0,0.25);}
#portfolio-filter li:first-child a{border-left:1px solid rgba(0,0,0,0.25);border-radius:4px 0 0 4px;}
#portfolio-filter li:last-child a{border-radius:0 4px 4px 0}
#portfolio-filter li a:hover{color:#333; text-decoration:none;font-weight: normal}
#portfolio-filter li.activeFilter a{color:#fff!important;background-color:#333333;margin:0 0;padding:13px 18px;text-decoration:none}
#portfolio-shuffle{float:right;width:41px;height:41px;border:1px solid rgba(0,0,0,0.25);font-size:14px;text-align:center;line-height:41px;color:#fff;border-radius:4px;cursor:pointer;-webkit-transition:all .2s linear;-o-transition:all .2s linear;transition:all .2s linear;background-color:#333}
#portfolio-shuffle:hover{background-color:#5ab24a;color:#FFF;text-shadow:1px 1px 1px rgba(0,0,0,0.2)}
#portfolio{position:relative;margin:0 -12px -12px 0}
body:not(.device-touch) #portfolio{-webkit-transition:height .4s linear;-o-transition:height .4s linear;transition:height .4s linear}
.portfolio-item {position:relative;float:left;width:276px;margin:0 12px 12px 0}
.portfolio-item {overflow:hidden}
.portfolio-item .portfolio-image{position:relative;overflow:hidden;border:1px solid rgba(0,0,0,0.07)}
.portfolio-item .portfolio-image,.portfolio-item .portfolio-image a,.portfolio-item .portfolio-image img{display:block;width:100%;height:auto;border-radius:5px}
body:not(.device-touch):not(.device-xs):not(.device-xxs) .portfolio-notitle .portfolio-image img{-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.portfolio-desc{z-index:3;padding:15px 5px 10px}
.portfolio-desc h3{margin:0;padding:0;font-size:19px;}
.portfolio-desc h3 a{color:#222}
.portfolio-desc h3 a:hover{color:#5ab24a}
.portfolio-desc span{display:block;margin-top:3px;color:#888}
.portfolio-desc span a{color:#888}
.portfolio-desc span a:hover{color:#000}
.portfolio-overlay{position:absolute;top:0;left:0;width:100%;height:100%; opacity:0;z-index:2;text-align:center;background-color:rgba(255,255,255,0.7)}
body:not(.device-touch):not(.device-xs):not(.device-xxs) .portfolio-overlay{-webkit-transition:opacity .4s ease-in-out;-o-transition:opacity .4s ease-in-out;transition:opacity .4s ease-in-out}
.portfolio-item:hover .portfolio-overlay,.iportfolio:hover .portfolio-overlay{opacity:1}
.portfolio-overlay a{position:absolute;top:50%;left:50%;background-color:#333;width:40px!important;height:40px!important;margin:-28px 0 0 -44px;font-size:18px;line-height:40px;text-align:center;color:#fff;border-radius:50%;-webkit-backface-visibility:hidden}
body:not(.device-touch):not(.device-xs):not(.device-xxs) .portfolio-overlay a{-webkit-transition:color .2s linear,background-color .2s linear,margin-top .2s linear,opacity .2s linear;-o-transition:color .2s linear,background-color .2s linear,margin-top .2s linear,opacity .2s linear;transition:color .2s linear,background-color .2s linear,margin-top .2s linear,opacity .2s linear}
.portfolio-overlay a.right-icon{left:auto;right:50%;margin-left:0;margin-right:-44px}
.portfolio-overlay a.center-icon{display:block;margin:-20px 0 0 -20px;opacity:0}
.portfolio-item:hover a.center-icon,.iportfolio:hover a.center-icon{opacity:1}
.portfolio-overlay a:hover{color:#fff;background-color:#5ab24a}
.portfolio-item:hover .portfolio-overlay a.left-icon,.portfolio-item:hover .portfolio-overlay a.right-icon,.iportfolio:hover .portfolio-overlay a.left-icon,.iportfolio:hover .portfolio-overlay a.right-icon{margin-top:-18px}
.portfolio-overlay a i.icon-line-play{position:relative;left:2px}
.portfolio-overlay .portfolio-desc{position:relative;padding:0!important;margin:0;text-align:center}
.portfolio-overlay .portfolio-desc a{display:inline;position:relative;top:0;left:0;margin:0;font-size:inherit;width:auto!important;height:auto!important;line-height:1;background-color:transparent!important;}
.portfolio-overlay .portfolio-desc h3{font-weight:600;color:#333 !important;line-height:1; margin-top:60px;}
.portfolio-overlay .portfolio-desc h3 a{color:#333 !important}
.portfolio-overlay .portfolio-desc span{margin-top:7px;color:#DDD!important}
.portfolio-overlay .portfolio-desc span a{color:#DDD!important;font-size:inherit}
.portfolio-overlay .portfolio-desc ~ a{display:inline-block;position:relative;top:0;left:0;margin:20px 0 0!important}
body:not(.device-touch):not(.device-xs):not(.device-xxs) .portfolio-overlay .portfolio-desc ~ a{-webkit-transition:color .2s linear,background-color .2s linear,opacity .2s linear;-o-transition:color .2s linear,background-color .2s linear,opacity .2s linear;transition:color .2s linear,background-color .2s linear,opacity .2s linear}
.portfolio-overlay .portfolio-desc ~ a.right-icon{left:0;right:0;margin-left:5px!important;margin-right:0!important}
.portfolio-overlay .portfolio-desc a:hover{background:transparent}
body.device-touch.device-xs .portfolio-notitle .portfolio-overlay,body.device-touch.device-xxs .portfolio-notitle .portfolio-overlay{display:none!important}
}