*, *:before, *:after {-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}

.heading-1 {float: left;text-align: center;}
.heading-1 h2 {position: relative;}
.heading-1 h2:before {content: '';position: absolute;left: -73px;background: url(images/heading-left-line.png) no-repeat left center;width: 58px;height: 6px;top: 0;bottom: 0;margin: auto;}
.heading-1 h2:after {content: '';position: absolute;right: -73px;background: url(images/heading-right-line.png) no-repeat left center;width: 58px;height: 6px;top: 0;bottom: 0;margin: auto;}

.gallery-bookshop {}

.gallery-bookshop ul{padding:0;margin:0;list-style:none}.gallery-bookshop ul.kode-item{padding:0 10px}.gallery-bookshop ul li{width:33.3333333%;float:left;font-size:0;position:relative;overflow:hidden;background-repeat:no-repeat;background-size:cover;background-position:center;box-sizing:border-box;border-style:solid;border-color:#aaa;border-width:1px;border-width:1px 0 0 1px}.gallery-bookshop .thumb{float:left;width:100%;overflow:hidden;position:relative;height:100%}.gallery-bookshop .thumb a{-webkit-transition:opacity .5s .5s,background-color .5s .5s;-moz-transition:opacity .5s .5s,background-color .5s .5s;-o-transition:opacity .5s .5s,background-color .5s .5s;transition:opacity .5s .5s,background-color .5s .5s}.gallery-bookshop .thumb img{display:block;width:100%;min-height:100%;max-height:100%}.gallery-bookshop .thumb .caption{position:absolute;left:0;top:0;width:100%;height:100%}.gallery-bookshop .thumb:hover .caption{opacity:.8;top:0;bottom:0;height:100%;background:#000}.gallery-bookshop .thumb .caption .holder{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;height:80px;width:90%;z-index:9;visibility:hidden;opacity:0;padding:0}.gallery-bookshop .thumb .caption .holder a{border:1px solid #f8f8f8;border-radius:4px;color:#fff;float:left;font:18px/20px "Lato",sans-serif;margin-left:25px;padding:10px 18px;text-decoration:none}.gallery-bookshop .thumb .caption .holder a:hover{opacity:.7}.gallery-bookshop .thumb .caption .holder a .fa-heart{padding:0 7px 0 0}.gallery-bookshop .thumb:hover .holder{visibility:visible;opacity:1}.gallery-bookshop .thumb .caption::after,.gallery-bookshop .thumb .caption::before{background:#000}.recent-work select>option{background-color:#f2f2f2;color:#2f384e!important}.portfolio-boxs{perspective:300px}.portfolio-boxs h3{color:#fff;margin:0 0 10px 0;font-size:40px;font-weight:500;transform:translateZ(-30px);transition:opacity .5s .2s,transform .5s .2s;word-wrap:break-word;line-height:1;opacity:0}.gallery-bookshop .thumb .caption:hover .portfolio-boxs h3{transform:translateZ(0px);opacity:1;transition:opacity .5s,transform .5s}.gallery-bookshop .thumb .caption .holder .portfolio-boxs h3 a{border:0;border-radius:0;font-size:2.2rem;margin-left:0;padding:0;line-height:1}.portfolio-boxs h3 a:hover{color:#08c}.portfolio-boxs p{color:#fff;font-size:16px;margin-left:0}.button-wrap{cursor:pointer;margin:20px auto 0;max-width:300px}.button-bg{width:100%;height:100%;background-color:#444;border-radius:40px;padding:3px;color:#fff;transition:all .2s ease}:hover.button-bg{color:#fff}.button-switch{position:relative;left:0;max-width:150px;height:44px;background-color:#ff7a05;border-radius:36px;transition:all .2s ease}.button-active .button-switch{left:145px}.button-in,.button-out{position:absolute;transition:all .2s ease;padding-top:10px;font-size:.9em;text-transform:uppercase;font-weight:600}.button-in{margin-left:175px}.button-out{margin-left:30px;color:#fff}.button-active .button-out{color:#fff}.button-active .button-in{color:#fff}.button-active .button-bg{background-color:#000}.button-in span{padding-left:15px}.button-out span{padding-left:15px}.button-in .fa{font-size:20px}.button-out .fa{font-size:20px}
.gallery-bookshop ul li {border-color: #ddd;border-width: 2px 0 0 2px;padding: 20px;}

/*=============== START NEW PORTFOLIO CSS ===============*/
@media (min-width: 1200px) {
.recent-work .row {margin-left: -20px;margin-right: -20px;}
}
/*=============== END NEW PORTFOLIO CSS ===============*/
@media (min-width:1699px) {
.recent-work .row-fluid {margin-left: 0px;}
}

@media (max-width:1499px) {
.portfolio-boxs h3 {font-size: 30px;}
}
@media (max-width:1199px) {
.gallery-bookshop .thumb img {min-height:100%;max-height:100%;}
.portfolio-boxs h3 {font-size: 24px;}
}
@media (max-width:1024px) {
.gallery-bookshop .thumb img {min-height:100%;max-height:100%;}
.recent-work .row {margin-left: -20px;margin-right: -20px;}
}
@media (max-width:979px) {
.gallery-bookshop ul li {width: 50%;margin: 0 0 20px 0;}.gallery-bookshop .thumb img {min-height:100%;max-height:100%;}
}
@media (max-width:767px) {
.recent-work .row {margin-left: 0px;margin-right: 0px;}
/*.portfolio-boxs h3 {font-size: 30px;}*/
}
@media (max-width:568px) {
.gallery-bookshop ul li {margin: 0;width: 100%;}
.gallery-bookshop ul li+li {}
.gallery-bookshop .thumb img {min-height: 100%;max-height: 100%;}
.portfolio-boxs {height: 100%;}
.button-switch {max-width: 150px;}
.button-in {margin-left: 150px;}
.button-out {margin-left: 12px;}
.button-in .fa {font-size: 20px;padding-left: 20px;}
.button-out .fa {font-size: 20px;padding-left: 20px;}
}

@media (max-width:320px) {
.button-active .button-switch {left: 135px;}
}