.resource-listing .views-row
{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
position:relative;
align-items: flex-end;

}
.resource-controls a
{
position:relative;
font-size:12px;
color:#263e58;
height: 40px;
display: block;
padding-top: 30px;
text-align: center;
outline:none;

margin-top: 20px;
}
.resource-controls .download a:before
{
background:url(img/download.png);
content:"";
position:absolute;
background-repeat:no-repeat;
background-position:center center;

}

.resource-controls .online a:before
{
background:url(img/View-Online_icon.png);
content:"";
position:absolute;
background-repeat:no-repeat;
background-position:center center;

}
.resource-controls .download a:before,
.resource-controls .online a:before
{
background-color:#263e58;
width:30px;
height:30px;
border-radius:50%;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
}

.resource-field.resource-controls {
padding-left: 20px;
}


.resource-image{
  /*width:calc( 100% - 85px );*/
}
.resource-image img{
  max-width:100%;
}
.resource-controls{
  width:85px;
}

/***new***/

@media only screen and (max-width : 1200px) {
  .resource-listing{

    border-left:10px solid #fff;
  }
  .resource-listing .views-row{
      max-width: 300px;
      margin: 0 auto;
  }
}

@media only screen and (max-width : 991px) {

  .resource-image img{
    width:100%;
  }
}

@media only screen and (max-width : 576px) {
    .resource-listing .views-row{
       max-width: 300px;
       margin: 0 auto;
    }
}