/* Tell the Grid Columns to stop having spaces, makes the images look better */
/* Grid is labeled with CSS Classes, FYI! */
.frontresources .col-sm-6, .frontresources .col-md-6, .frontresources .col-lg-3 {
padding: 0 !important;
overflow: hidden;
}

#region-preface-first {
background-color: #333333;
}

.frontresources .views-row {
    margin-bottom: 0px !important;
}

.views-field-field-persona-image {
    margin-bottom: 0px !important;
}

.content {
padding-top: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.content .total-results-4 {
position: relative !important;
}


/* Lets make the View Header stand out */
.frontresources .view-header {
position: absolute !important;
width: 100% !important;
z-index: 5;
background: rgba(25, 25, 25, .4);
margin: 0px !important;
padding: 0px !important;
}
.frontresources .view-header .motto {
font-size: 1.8em;
font-style: italic;
color: #fafafa;
display: block !important;
padding: 20px 15px 5px 15px;
font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
}

/* Tell the image to be Relative */
.views-column .personaimg {
position: relative !important;
max-width:100%; 
height: auto !important;
margin: 0px !important;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.views-column .personaimg:hover {
  -moz-transform: scale(1.3);
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}

/* Tell the Persona Titles to overlap */
.frontresources .views-field-title {
position: absolute !important;
width: 100%;
bottom: 0;
z-index: 4;
background: rgba(25, 25, 25, .5);
}

.frontresources .gridtitle a {
font-size: 1.8em;
font-weight: bold;
text-align: center;
color: #fafafa;
display: block !important;
font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
}