/*------------------isotop items------------------*/ .isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; } .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 { overflow: visible; -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: top, left, opacity; transition-property: transform, opacity; } /**** disabling Isotope CSS3 transitions ****/ .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; } /* End: Recommended Isotope styles */ /* disable CSS transitions for containers with infinite scrolling*/ .isotope.infinite-scrolling { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } .isotope-box { margin-left: -32px; } .element { float: left; width: 270px; height: auto !important; display: block; position: relative; border: none; margin: 0 !important; padding: 0 0 30px 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .isotope .isotope-item { margin: 20px 0 0 0; } #options { margin-bottom: 20px; text-align: center; } #filters { position: relative; margin: 0; } #filters li { display: inline-block; padding: 0 2px 5px 2px; } #filters li a { background: none; border: 1px solid #f5f5f5; background: #f5f5f5; margin: 0; text-decoration: none; padding: 16px; color: #777; font-size: 13px; font-weight: 400; text-transform: uppercase; font-family: "microsoft yahei","arial, helvetica, sans-serif"; } #filters.pagination li a.selected { background: none; border: 1px solid #f5f5f5; background: rgb(199, 226, 242); margin: 0; text-decoration: none; padding: 16px; color: #111; font-size: 13px; font-weight: 400; text-transform: uppercase; font-family: "microsoft yahei","arial, helvetica, sans-serif"; } .thumb-isotope {} .thumb-isotope .thumbnail { border: none; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; margin-bottom: 0; background: none; } .thumb-isotope .thumbnail a { position: relative; display: block; text-decoration: none; padding: 0px; background: none; border: none; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; } .thumb-isotope .thumbnail a:hover { background: none; } .thumb-isotope .thumbnail a figure { position: relative; margin: 0; float: none; margin: 0px 0px 0px 0px; padding: 0px; background: #000; border: none; transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; } .thumb-isotope .thumbnail a:hover figure {} .thumb-isotope .thumbnail a img { height: 450px; width: 100%; opacity: 1; filter: alpha(opacity=100); transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; } .thumb-isotope .thumbnail a:hover img { opacity: 0.5; filter: alpha(opacity=50); } .thumb-isotope .thumbnail a em { position: static; width: 100%; height: 100%; left: 0; top: 0; z-index: 2; background: url("../images/icons/photo1.png") center center no-repeat; opacity: 0; filter: alpha(opacity=0); transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; } .thumb-isotope .thumbnail a.v em { background: url("http://www.adamthemes/images/video1.png") center center no-repeat; } .thumb-isotope .thumbnail a:hover em { opacity: 1; filter: alpha(opacity=100); } .thumb-isotope .thumbnail a .caption { background: #fff; border-top: none; font-family: "SourceHanSans-Bold","arial, helvetica, sans-serif"; font-size: 12px; line-height: 18px; color: #858585; text-align: left; padding: 20px; transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; } .thumb-isotope .thumbnail a:hover .caption { color: #858585; background: #f2f2f2; }