/***
    CONTACT PAGE FIELD COLLECTION:
      NOTE: flexbox layout is used on this selector
      due to not being able to override the field collection module markup for this specfic field. 
      This layout is specific to the contact us page tiles 
      that need to be lined up in a row. This coincides with the field-collection-item--field-contact-accordion-item.tpl.php
***/


.node-contact-page .field-collection-container {
  border: 0;
}

.content_grid_3up .field-collection-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-bottom: 16px;
}

.field-name-field-contact-section .field-items .field-item {
  border-bottom: 1px solid #979797;
}

.content_grid_3up .field-collection-container:last-of-type {
  border-bottom: 0;
}

.content_grid_3up .field-collection-container > .content {
  padding: 0;
  margin-bottom: 32px;
  border: 0;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.content_grid_3up .field-collection-container > .content_flex {
  display: flex;
  flex-direction: column;
}

.content_grid_3up .field-collection-container > .content_flex > .card {
  flex: 1 0 auto;
}

.node-contact-page .field-collection-container {
  margin-bottom: 0;
}

.node-contact-page .field-collection-container +  .field-collection-container  {
  margin-top: 1em;
}

.node-contact-page .field-collection-view  {
  padding: 0;
  margin: 0;
}

@media (min-width: 768px) {
  .content_grid_3up .field-collection-container {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .content_grid_3up .field-collection-container > * {
    flex-grow: 1;
    width: 31%;
    margin-right: 30px;
  }
}

.justify-start, 
.field-collection-container.justify-start {
  justify-content: start;
}