/* Easy Portfolio Articles Style2 */

div.style2 ul.jb-portfolio-filter {
    list-style: none;
    padding: 0;
    margin: 0 0 25px;
}

div.style2 ul.jb-portfolio-filter li {
    display: inline-block;
	border: 0;
}

div.style2 .col-1 {
    width: 100%;
}

div.style2 .col-2 {
    width: 49.99%;
}

div.style2 .col-3 {
    width: 33.3%;
}

div.style2 .col-4 {
    width: 24.9%;
}

div.style2 .col-5 {
    width: 20%;
}

div.style2 .col-6 {
    width: 16%;
}

div.style2 .col-7 {
    width: 14%;
}

div.style2 .col-8 {
    width: 12.5%;
}

div.style2 .col-9 {
    width: 11%;
}

div.style2 .col-10 {
    width: 10%;
}

div.style2 {
    margin-top: 10px;
}

div.style2 ul.jb-portfolio-items {
    list-style: none;
    padding: 0;
    margin: -10px -20px;
    text-align: center;
    display: block;
    position: relative;
    overflow: hidden;
}

div.style2 ul.jb-portfolio-items>li {
    background: transparent;
    padding: 0;
    margin: 0;
	border: 0;
    float: left;
}

div.style2 .jb-portfolio-item-inner {
    margin: 10px 20px;
    height: 100%;
}

div.style2 .jb-portfolio-thumb,div.style2 .jb-portfolio-item-details {
    position: relative;
}

div.style2 .jb-portfolio-thumb {
    border: 5px solid transparent;
    border-radius: 2px;
    outline: 0;
    box-shadow: 0 0 2px #aaa;
    outline-radius: 7px;
}

div.style2 .jb-portfolio-thumb img {
    width: 100%;
    max-height: 100%;
    padding: 0;
    margin: 0!important;
    outline: 0;
    border: 0;
}

div.style2 .jb-portfolio-item-details h4 {
    margin: 10px 0 10px;
    font-size: 140%;
}

div.style2 .jb-portfolio-item-details .item-title a {
    color: #333;
}

div.style2 .jb-portfolio-item-details .item-title {
    font: 400 22px/40px;
}

div.style2 .jb-portfolio-introtext {
    margin: 0 auto;
    padding: 0 0 16px;
    line-height: 25px;
}

div.style2 .jb-portfolio-introtext p,div.style2 .jb-portfolio-introtext p+p {
    padding: 0;
    margin: 0;
}

div.style2 hr {
    border: 0;
    border-bottom: 1px solid #e0e0e0;
    height: 2px;
    box-shadow: 0 1px 0 white;
    margin: 0 5% 8px;
}

div.style2 .jb-portfolio-item-details .ext-url i {
    padding: 0 0 0 7px;
    color: #aaa;
    -webkit-transition: 300ms;
    -moz-transition: 300ms;
    -o-transition: 300ms;
    -ms-transition: 300ms;
    transition: 300ms;
}

div.style2 .jb-portfolio-item-details .ext-url:hover i {
    color: #555;
}

div.style2 .jb-portfolio-thumb .jb-portfolio-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: -moz-radial-gradient(center,ellipse cover,rgba(0,0,0,0.05) 0,rgba(0,0,0,0.45) 100%);
    background: -webkit-gradient(radial,center center,0,center center,100%,color-stop(0,rgba(0,0,0,0.1)),color-stop(100%,rgba(0,0,0,0.45)));
    background: -webkit-radial-gradient(center,ellipse cover,rgba(0,0,0,0.05) 0,rgba(0,0,0,0.45) 100%);
    background: -o-radial-gradient(center,ellipse cover,rgba(0,0,0,0.05) 0,rgba(0,0,0,0.45) 100%);
    background: -ms-radial-gradient(center,ellipse cover,rgba(0,0,0,0.05) 0,rgba(0,0,0,0.45) 100%);
    background: radial-gradient(ellipse at center,rgba(0,0,0,0.05) 0,rgba(0,0,0,0.45) 100%);
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: opacity 300ms;
    transition: opacity 300ms;
}

div.style2 .jb-portfolio-thumb:hover .jb-portfolio-overlay {
    opacity: 1;
    filter: alpha(opacity=100);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#26000000',endColorstr='#8f000000',GradientType=1);
}

div.style2 .jb-portfolio-thumb .jb-portfolio-overlay>div {
    position: absolute;
    top: 50%;
    margin-top: -22px;
    width: 100%;
    height: 30px;
    text-align: center;
}

div.style2 .jb-portfolio-thumb .jb-portfolio-overlay .category-name {
    color: #fff;
    position: absolute;
    top: 5px;
    left: 5px;
    background: rgba(20,20,20,.4);
    padding: 1px 7px;
    border-radius: 2px;
}

div.style2 .jb-portfolio-thumb .jb-portfolio-overlay>div>a {
    width: 40px;
    height: 40px;
    background-color: #fff;
    background-color: rgba(255,255,255,.95);
    box-shadow: 0 0 7px rgba(0,0,0,.2);
    background-repeat: no-repeat;
    background-position: 50%;
    display: inline-block;
    position: absolute;
    top: 50%;
    margin-top: -13px;
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    transition: all 300ms ease;
}

div.style2 .jb-portfolio-thumb .jb-portfolio-overlay>div>a:hover {
    box-shadow: 0 1px 14px rgba(0,0,0,.5);
}

div.style2 .jb-portfolio-thumb .jb-portfolio-preview {
    left: 50%;
    margin-left: -75px;
    z-index: 10;
    border-radius: 3px;
}

div.style2 .jb-portfolio-thumb .jb-portfolio-link {
    right: 50%;
    margin-right: -75px;
    z-index: 10;
    border-radius: 3px;
}

div.style2 .jb-portfolio-thumb:hover .jb-portfolio-preview {
    opacity: 1;
    filter: alpha(opacity=100);
    margin-left: -45px;
}

div.style2 .jb-portfolio-thumb:hover .jb-portfolio-link {
    opacity: 1;
    filter: alpha(opacity=100);
    margin-right: -45px;
}

div.style2 .jb-portfolio-thumb .jb-portfolio-overlay>div>a>i {
    font-size: 18px;
    line-height: 42px;
    opacity: 1;
    filter: alpha(opacity=100);
}

div.style2 .jb-portfolio-loadmore {
    text-align: center;
}

div.style2 .btn {
    -webkit-transition: all 300ms;
    transition: all 300ms;
}

div.style2 .btn.active {
    background-color: #777;
    background: rgba(0,0,0,.55);
    border-radius: 3px;
    color: #fff;
}

div.style2 .btn {
    background-color: #f5f5f5;
    background-image: none;
    border: 0;
    box-shadow: none;
    color: #777;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 0;
    padding: 4px 12px;
    text-align: center;
    text-shadow: none;
    vertical-align: middle;
    -moz-border-radius: 0;
    -moz-box-shadow: none;
    -webkit-border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

div.style2 .btn:hover {
    color: #555;
}

div.style2 .btn.active:hover {
    color: #fff;
}

/* Load More button */
div.style2 .jb-portfolio-loadmore {
    text-align: center;
    width: 100%;
    padding: 0;
    margin: 0 auto;
    height: 60px;
    clear: both;
    position: relative;
}

div.style2 .jb-portfolio-loadmore .btn {
    overflow: hidden;
    margin: 10px auto;
    padding: 0;
    min-width: 140px;
    height: 38px;
    line-height: 38px;
    font-size: 16px;
    color: #aaa;
    text-transform: none;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(25,25,25,.1);
}

div.style2 .jb-portfolio-loadmore .btn:hover {
    color: #777;
}

div.style2 .jb-portfolio-loadmore .btn span.before {
    display: block;
    padding: 0;
    text-align: center;
    color: #777;
    position: relative;
    border-radius: 3px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    opacity: 1;
}

div.style2 .jb-portfolio-loadmore .btn:hover span.before {
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -o-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    color: #fff;
    visibility: hidden;
}

.ie div.style2 .jb-portfolio-loadmore .btn span:after {
    visibility: hidden;
}

div.style2 .jb-portfolio-loadmore .btn span.after {
    opacity: 1;
    visibility: hidden;
    display: block;
    position: relative;
    left: 0;
    top: -38px;
    text-align: center;
    color: #fff;
    border-radius: 4px;
    opacity: 0;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
}

div.style2 .jb-portfolio-loadmore .btn span.after i {
    margin-left: 2px;
    text-align: center;
}

div.style2 .jb-portfolio-loadmore .btn:hover span.after {
    opacity: 1;
    color: #fff;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    visibility: visible;
}

div.style2 .jb-portfolio-loadmore .btn.loading {
    background: white!important;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

div.style2 .jb-portfolio-loadmore .btn.loading .fa-spin {
    display: block;
    font-size: 24px;
    line-height: 38px;
    vertical-align: middle;
    color: #777;
}

div.style2 .jb-portfolio-loadmore .btn .fa-spinner,
div.style2 .jb-portfolio-loadmore .btn.loading span {
    display: none;
}

div.style2 .jb-portfolio-loadmore .btn.loading .fa-spinner {
    display: inline-block;
    font-size: 24px;
    line-height: 36px;
}

div.style2 .jb-portfolio-loadmore .btn.hide {
    opacity: 0;
    height: 0px;
    display: inline-block;
}

/*Isotope Animation*/
.isotope,.isotope .isotope-item {
    -webkit-transition-duration: .7s;
    -moz-transition-duration: .7s;
    -ms-transition-duration: .7s;
    -o-transition-duration: .7s;
    transition-duration: .7s;
}

.isotope {
    -webkit-transition-property: height,width;
    -moz-transition-property: height,width;
    -ms-transition-property: height,width;
    -o-transition-property: height,width;
    transition-property: height,width;
}

.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform,opacity;
    -moz-transition-property: -moz-transform,opacity;
    -ms-transition-property: -ms-transform,opacity;
    -o-transition-property: -o-transform,opacity;
    transition-property: transform,opacity;
}

/* Fix for Firefox and Opera (fa-spin) rotation */
.fa-spin{
	-moz-animation: fa-spin 2s infinite linear;
	-o-animation:fa-spin 2s infinite linear;
	-webkit-filter: blur(0);
	}
@-moz-keyframes fa-spin{0%{-moz-transform:rotateZ(0deg);}100%{-moz-transform:rotateZ(359deg);-o-transform:rotateZ(359deg)}}
@-o-keyframes fa-spin {0% {-o-transform:rotate(0deg);}100%{-o-transform:rotate(359deg);}}

/* Responsive (480px) */
@media (max-width: 480px) { div.style2 .jb-portfolio-thumb,div.style2y .jb-portfolio-thumb img {width:100%;margin:0 0 10px;} }