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


.smFilter{ width: 100%; height: auto; display: block; border-bottom: 1px solid #d8d8d8; margin-bottom: 40px; margin-left: 12px; padding:0 !important;  }
.smFilter:after{content:''; display:block; clear:both;}
.smFilter a{width: auto; height: auto; display: block; float: left; margin-right: 40px; position: relative; padding-bottom: 25px; padding-left: 27px!important; box-sizing: border-box; font-size:18px; line-height:18px; font-weight:300; color:#4e4e4e; cursor: pointer;}
.smFilter a:after { content: ''; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: #cecece; display: block; z-index: 1; }
.smFilter a.filterActive{ color:#000;}
.smFilter a.filterActive:after{ content: ''; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: #f1552c url(../images/tick.png) center center no-repeat; display: block; z-index: 2; }
.smFilter a.filterActive:before {content: ''; position: absolute; left: 0; right: 0; bottom:-1px; width: 100%; height:1px; background: #FF0004;}



 article.smbox{  text-align:left;  position:relative; float:left; width:25%; margin-bottom:30px; padding:0 12px;}
 article.smbox>div{ background:#FFF;overflow:hidden; border-radius:5px; box-shadow:0px 0px 15px 0px rgba(120,120,120,0.2); -moz-box-shadow:0px 0px 15px 0px rgba(120,120,120,0.2);-webkit-box-shadow:0px 0px 15px 0px rgba(120,120,120,0.2); height:100%; position:relative;}	
article.smbox  figure{ /* position:absolute; left:0; top:0; width:375px; height:100%; */ background:#CCC;}
 article.smbox figure img{ display:block; width:100%;}
 article.smbox aside{ padding:35px 30px 55px; height:270px; overflow:hidden; position:relative;} 
  article.smbox aside:after{content:''; position:absolute; left:0; bottom:0; width:25px; height:15px; background:#C00;}
  article.smbox aside:after { width: 11px; height: 7px; position: absolute; z-index: 1; left:35px; bottom:30px;  content: ""; color: #fff; line-height: 38px; display: block; background: url(../images/arrow4.png) 100% 50% no-repeat; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 0.5s ease; }
article.smbox aside:hover:after {background:url(../images/arrow4.png) -1px 50% no-repeat;}

  
 article.smbox aside strong{ display:block; font-size:11px; text-transform:uppercase; font-weight:300; color:#474747; margin-bottom:10px;}
  article.smbox aside h3{font-size:15px; font-weight:400; color:#474747; margin-bottom:15px;}
   article.smbox aside span.date{ display:block;font-size:11px; color:#f1552c; margin-bottom:5px; }
    article.smbox aside span.newspaper{ display:block; font-size:11px;  font-weight:300; color:#474747;}


.youtube-social  a > div, .facebook  a > div{ width:100%; background:#FFF; position:relative; height:212px; border:1px solid #f3f3f3; overflow: hidden;
    border-radius: 5px;
    box-shadow: 0px 0px 15px 0px rgba(120,120,120,0.2);
    -moz-box-shadow: 0px 0px 15px 0px rgba(120,120,120,0.2);
    -webkit-box-shadow: 0px 0px 15px 0px rgba(120,120,120,0.2);
    }
.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){
 article.smbox{ width:33.33333333333333333333%;}
.smbox > div{ }
}


@media screen and (max-width:650px){
.smFilter {text-align: center;}
 article.smbox{width:49.5%; }
 article.smbox > div{ }
}
@media screen and (max-width:560px){
.smFilter a {margin-right: 10px;font-size: 12px;}	
	
}

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


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