.positive {margin-right: 10px; font-size:24px; color:#343434;}
.positive:hover {color:#0ed145;}    
.negative {margin-right: 10px; font-size:24px; color:#343434;}
.negative:hover {color:#ec1c24;}
    
.f-material {
 padding: 20px;
 border: 0px solid rgba(54, 64, 74, 0.02);
 border-radius: 3px;
 margin-bottom: 20px;
 background-clip: padding-box;
 background-color: #fff;
 box-shadow: 0 0 10px 1px rgba(214, 214, 214,0.5);
}
a {
 text-decoration: none;
}
.f-title {
margin-bottom: 12px !important;
color : #000 !important;
font-weight: 700;
text-decoration:none;
font-size : 20px ;
overflow: hidden;
height: 20px;
line-height: 20px;    
}
.f-title:hover {
color : #4d80aa !important;
text-decoration:none;
}
.f-info{
font-size : 20px ;
margin-top: 0px !important;
color : #fff;  
font-weight: 300;
background-color: #4d80aa;  
padding: 2px;
border-radius: 2px;
padding-right: 8px;
padding-left: 8px;
}
.f-image {
border-radius : 2px;
margin-bottom: 10px !important;
width:100%;
height:100%; 
}
.f-massage {
font-size : 16px !important;
margin-top: 10px !important;    
margin-bottom: 5px !important;
color: #5e6266 !important;	
}

.f-massage-box {
overflow: hidden;
line-height: 25px;
}
.icons {
padding-right: 4px;    
}  
    
.ribbon:nth-child(even) {
  margin-right: 4%;
}
@media (max-width: 500px) {
  .ribbon {
    width: 100%;
  }
  .ribbon:nth-child(even) {
    margin-right: 0%;
  }
}    
.f-ribbon-panel {
  position: absolute;
  top: 15px;
  padding: 8px 10px;
  background: #2196F3;
  box-shadow: -1px 2px 3px rgba(0,0,0,.3);
  color: #fff;
}
.f-ribbon-panel:before, .f-ribbon-panel:after {
  content: "";
  position: absolute;
}
.f-ribbon-panel:before {
  width: 7px;
  height: 100%;
  top: 0;
  left: -6.5px;
  padding: 0 0 7px;
  background: inherit;
}