@charset "utf-8";
/* CSS Document */

.smFilter{ text-align:right; padding:0px 0px 10px 0;}
.smFilter span{ display:inline-block; margin-right:8px; font-size:12px; font-weight:400; color:#000;}
.smFilter a{display:inline-block; background:url(../images/filterA.png) no-repeat 0 100%; padding-left:22px; margin-right:8px; font-size:12px; font-weight:400; color:#9e9e9e;}
.smFilter a.filterActive{display:inline-block; background:url(../images/filterA.png) no-repeat 0 0; color:#000;}


.smbox{  margin:15px 0; padding:0 15px; float:left; width:25%; overflow:hidden; position:relative;}

.smbox > div{ width:100%; background:#FFF; position:relative; height:212px; border:1px solid #f3f3f3; }
.smbox > div > img{ display:block; position:relative; z-index:1; width:100%;}
.smbox > div > div{ padding:25px; color:#3e3e3e; font-size:12px;}
.smbox > div > div a{ color:#458acb;}

.youtube-social  a > div, .facebook  a > div{ width:100%; background:#FFF; position:relative; height:212px; border:1px solid #f3f3f3; }
.youtube-social  a > div > img, .facebook  a > div > img{ display:block; position:relative; z-index:1; width:100%;}
.youtube-social a > div > div, .facebook a > div > div{ padding:25px; color:#3e3e3e; font-size:12px;}
.youtube-social a > div > div a, .facebook a > div > div a{ color:#458acb;}

.smfooter{ position:absolute; left:0; bottom:-1px; width:100%; height:50px; padding:10px 50px 10px 15px; z-index:2; color:#458acb;  text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.smfooter span{ display:block; color:#989898; font-size:11px;}

.youtube-social .smfooter{ background:#FFF url(../images/icon-youtube.png) no-repeat 100% 50%; border-bottom:1px solid #f3f3f3;}
.twitter .smfooter{ background:#FFF url(../images/icon-twitter.png) no-repeat 100% 50%; border-bottom:1px solid #f3f3f3;}
.facebook .smfooter{ background:#FFF url(../images/icon-facebook.png) no-repeat 100% 50%; border-bottom:1px solid #f3f3f3;}

.smbox_info{ background:rgba(255, 255, 255, 0.8) !important; height:200px; width:100%!important;   position: absolute !important; top:300px; left: 0px; z-index:1;}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

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

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, 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;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */

/*-------for flipping social media item start--------*/
/*.front{z-index: 2;}
.back{z-index: 1;
    -webkit-transform: rotatey(-180deg);
    -ms-transform: rotatey(-180deg);
    -moz-transform: rotatey(-180deg);  
    transform: rotatey(-180deg);  
	 background:#FFF;
	 height:200px;
    position: absolute !important; top: 0px;
    left: 0px; margin:0 15px; height: 100% !important;
	}
.youtube:hover .front, .facebook:hover .front {
    z-index: 1;
    -webkit-transform: rotatey(180deg);
    -ms-transform: rotatey(180deg);
    -moz-transform: rotatey(180deg);
    transform: rotatey(180deg);
}
.youtube:hover .back, .facebook:hover .back {
    z-index: 2;   
    -webkit-transform: rotatey(0deg);
    -ms-transform: rotatey(0deg);
    -moz-transform: rotatey(0deg);
    transform: rotatey(0deg);
}*/	
/*-------for flipping social media item end--------*/

.loadMore{ text-align:center; }
.loadMore a{color: #2c5db4; background: url(../images/icon-more.png) no-repeat 100% 50%;  padding-right: 15px; font-size: 11px; display: inline-block; margin: 15px 10px 0 0;}



@media screen and (max-width:1050px){
.smbox{width:33.333333333%; }
.smbox > div{/*height:180px;*/height:212px; }
}


@media screen and (max-width:650px){
.smFilter {text-align: center;}
.smbox{width:49.5%; }
.smbox > div{height:180px; }
}

@media screen and (max-width:485px){
.smbox{width:100%; }
.smbox > div{height:auto; }
.smbox > div > div { padding-bottom:60px;}
}


@media screen and (max-width:360px){
.smFilter span { display:block; margin:-5px 0 5px;}
}