/*index css cmsyou*/
/*banner*/
.banner{ position:relative; height:10rem; background:url(../images/banner.png) center top no-repeat; background-size:cover; overflow:hidden;}
.banner .text{ width:50%; color:#fff; font-size:14px; line-height:1.5em; text-align:right; padding-left:10%; padding-top:50px;}
.banner .text a{ color:#fff;}
.banner .text h3{ font-size:20px; line-height:2em;}
.banner .img{ position:absolute; right:15%; bottom:40px; width:22%; z-index:8;}
.banner .img img{ width:100%; height:auto;}

/*pinterest*/
.pinterest-container{-webkit-transform: translateZ(0);-webkit-backface-visibility: hidden;width: 100%;list-style-type: none;position: relative;margin: 0;padding: 0;}
.pinterest-container li{list-style: none!important;width: 200px;background:transparent none repeat scroll 0 0;background-image: none;list-style-image:none;list-style-type:none;display: none;margin: 0;padding: 0;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);}
.pinterest-container li.inactive{visibility: hidden;opacity: 0;}
.pinterest-container a, .pinterest-container a:active, .pinterest-container a:focus{text-decoration: none;outline: 0;}
.pinterest-container li{-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}
.pinterest-container li img{margin: 0;padding: 0;display: block;-webkit-border-radius: 0;-moz-border-radius: 0;border-radius: 0;box-shadow: none;}
div.front{margin: 0;padding: 0;position: relative;z-index: 1001;background: #C71585;color: #fff;}
div.back{position: absolute;top: 0;left: 0;margin: 0;background: #fff;}
div.back h4{margin: 7px 7px 0 7px;}
.pinterest-container li p, .pinterest-container li p, .pinterest-container li p{color: #666;font-size: 12px;margin: 7px 7px 0 7px;padding-bottom: 8px;color: #fff;}
div.info{background: #fff;}
div.info h4{margin: 0px 7px 0 7px;padding-top: 10px;}
.cq-pinterest-filters{list-style-type: none;text-align: center;margin: 0 5% 12px 5%;}
.cq-pinterest-filters li{display: inline-block;background: #333;color: #fff;font-size: 12px;/*float: left;*/padding: 4px 8px 4px 8px;cursor: pointer;margin: 0 1% 0 1%;-webkit-transition: all 0.15s ease-out;-moz-transition: all 0.15s ease-out;-o-transition: all 0.15s ease-out;transition: all 0.15s ease-out;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.cq-pinterest-filters li:hover{background: #B03060;}
.cq-pinterest-filters li.active{background: #0066ff;color: #fffFFF;}
.wookmark-placeholder{-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}

/*gallery-list*/
.main-container{ background-color:#edeef0; margin:0 auto; clear:both;}
.gallery-list{ position:relative; width:100%; text-align:center; padding:30px 35px 50px; clear:both; display:none}
.gallery-list ul{position:relative;}
.grid-sizer{width:25%;}
.gallery-list ul li{position: absolute; float:left; width:25%; margin-bottom:6px; padding:0; display:none;}
.gallery-list ul li a{ display:block;}
.gallery-list ul li .img{ margin:0; display:block; clear:both;}
.gallery-list ul li .img img{ width:100%; height:auto; border-top-left-radius:3px;border-top-right-radius:3px; display:block;}
.gallery-list ul li .author{ height:28px; padding:5px 10px; border-bottom:1px solid #eee; background:#fff; overflow:hidden;}
.gallery-list ul li .author .icon-avatar{ float:left; height:16px; line-height:16px; font-weight:bold; text-overflow:ellipsis; white-space:nowrap; display:block; overflow:hidden;}
.gallery-list ul li .author .icon-avatar img{width: 16px;height: 16px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;}
.gallery-list ul li .author .name{ float:left; color:#666; font-size:12px; line-height:16px; margin-left:5px;}
.gallery-list ul li .status{ height:28px; text-align:left; padding:0px 10px; border-bottom-left-radius:3px;border-bottom-right-radius:3px; background:#fff; overflow:hidden;}
.gallery-list ul li .status .icon-heart{ color:#999; font-size:12px; line-height:16px; padding-left:16px; background:url(../images/like_grey.png) left center no-repeat; background-size:12px auto; display:inline-block;}
.gallery-list ul li .status .icon-comment{ color:#999; font-size:12px; line-height:16px; padding-left:16px; background:url(../images/comment_grey.png) left center no-repeat; background-size:12px auto; margin-left:15px; display:inline-block;}
.li_loading{ position:absolute; bottom:15px; left:50%; margin-left:-60px;}
.btn_loading{ color:#11b5e5; font-size:13px; line-height:25px; padding:5px 40px; border-radius:3px; background-color:#fff;}
.btn_loading:active{background-color:#f8f8f8;}

/* responsive diy */
@media (min-width:1220px){
.banner .text h3{ font-size:30px; line-height:2.5em;}
.header{ height:auto; padding-top:20px; padding-bottom:18px;}
.banner{ height:16rem;}
.banner .text{padding-top:100px;}
}
@media (max-width:1219px){
}
@media (max-width:1169px){
}
@media (max-width:919px) {
}
@media (max-width:767px) {
}
@media (max-width:639px) {
.banner .text{ width:55%; padding-left:5%; padding-top:40px;}
.banner .img{right:12%;}
.banner .img img{ width:100%; height:auto;}
.gallery-list{padding:25px 25px 50px;}
.gallery-list ul li{width:33.33%;}
}
@media (max-width:539px) {
.banner .text{ width:55%; padding-left:5%; padding-top:40px;}
.banner .img{right:10%; bottom:60px;}
.banner .img img{ width:100%; height:auto;}
}
@media (max-width:479px) {
.banner{height:18rem;}
.banner .text{ width:90%; text-align:center;}
.banner .img{ left:5%; right:5%; bottom:-165px; width:90%; text-align:center;}
.banner .img a{ width:45%; display:inline-block;}
.gallery-list{padding:15px 15px 50px;}
.grid-sizer{width:50%;}
.gallery-list ul li{width:50%;}
}
@media (max-width:359px) {
.banner .text{ font-size:12px;}
.banner .img{bottom:-130px;}
}
@media (min-width:1170px) and (max-width:1219px) {
.header{ height:auto; padding-top:18px; padding-bottom:16px;}
.banner{ height:14rem;}
.banner .text{padding-top:100px;}
}
@media (min-width:880px) and (max-width:1169px) {
.header{ height:auto; padding-top:15px; padding-bottom:14px;}
.banner{ height:12rem;}
.banner .text{padding-top:80px;}
}
@media (min-width:768px) and (max-width:879px) {
.header{ height:auto; padding-top:13px; padding-bottom:12px;}
}
@media (min-width:640px) and (max-width:767px) {
}
@media (min-width:480px) and (max-width:639px) {
}
@media (min-width:360px) and (max-width:479px) {
}
@media (min-width:320px) and (max-width:359px) {
}
@media (max-width:319px) {
.banner{height:15rem;}
.banner .img{bottom:-140px;}
}