/**
 * Style sheet for the management/collaboration page
 */

/* Style for bio of each management person */

.contextual-region.layout.layout--twocol-bricks {
  margin-top: 2%;
  margin-bottom: 2%;
}

.layout__region.layout__region--first-above {
  padding-top: 10px;
}

.layout__region.layout__region--second-above {
  padding-left: 3%;
}

.field.field--name-field-given-name {
  display: inline-block;
  font-size: 28pt;
  padding: 0;
  margin: 0;
}

.field.field--name-field-given-name a {
  text-decoration: none;
  color: #666;
}

.field.field--name-field-family-name {
  display: inline-block;
  font-size: 28pt;
  padding-left: 10px;
  margin: 0;
}

.field.field--name-field-family-name a {
  text-decoration: none;
  color: #666;
}

/* Trick to move to new line */
.field.field--name-node-title {
  margin: 0;
}

.field.field--name-field-mgt-position {
  display: inline-block;
  font-size: 18pt;
}

.field.field--name-field-mgt-position:after {
  content: ", ";
  padding-right: 5px;
}

.field.field--name-field-mgt-position a {
  text-decoration: none;
  background: none;
  color: #0B80C3;
}

.field.field--name-field-mgt-position a:hover {
  text-decoration: none;
  background: none;
  color: #0B80C3;
}

.field.field--name-field-position-start {
  display: inline-block;
  font-size: 18pt;
}

.field.field--name-field-position-start:after {
  content: " - ";
  padding-right: 3px;
}

.field.field--name-field-position-end {
  display: inline-block;
  font-size: 18pt;
}

/* Trick to move to new line */
.field.field--name-field-current-management {
  display: block;
  font-size: 0;
  margin: 0;
}

.field.field--name-field-previous-position {
  display: inline-block;
  font-size: 18pt;
}

.field.field--name-field-previous-position a {
  text-decoration: none;
  background: none;
  color: #0B80C3;
}

.field.field--name-field-previous-position a:hover {
  text-decoration: none;
  background: none;
  color: #0B80C3;
}

.field.field--name-field-previous-position:after {
  content: ", ";
  padding-right: 5px;
}

.field.field--name-field-previous-start {
  display: inline-block;
  font-size: 18pt;
}

.field.field--name-field-previous-start:after {
  content: " - ";
  padding-right: 3px;
}

.field.field--name-field-previous-end {
  display: inline-block;
  font-size: 18pt;
}

/* Adjustments for Phone */

@media screen and (max-width: 640px) {
  .layout__region.layout__region--first-above {
    padding: 0 2% 0;
  }
  .layout__region.layout__region--second-above {
    padding: 0 2% 2%;
  }
  .field.field--name-field-given-name {
    font-size: 24pt;
  }
  .field.field--name-field-mgt-position {
    font-size: 14pt;
  }
  .field.field--name-field-position-start {
    font-size: 14pt;
  }
  .field.field--name-field-position-start:after {
    padding-right: 2px;
  }  
  .field.field--name-field-position-end {
    font-size: 14pt;
  }
  .field.field--name-field-mgt-previous-position {
    font-size: 14pt;
  }
  .field.field--name-field-previous-start {
    font-size: 14pt;
  }
  .field.field--name-field-previous-start:after {
    padding-right: 2px;
  }  
  .field.field--name-field-previous-end {
    font-size: 14pt;
  }
}

/* Beginning of style for the bio of the management */

/*

.block-field-blocknodemanagement-peoplebody {
    margin-left: 9%;
    margin-top: 5%;
  }
  
  .block-field-blocknodemanagement-peopletitle, 
  .block-field-blocknodemanagement-peoplefield-position, 
  .block-field-blocknodemanagement-peoplefield-starting-date-ending-date {
    margin-left: 9%;
  }
  
  .block-field-blocknodemanagement-peoplefield-image-management {
    margin-top: 4.5%;
  }
  
  .field--name-field-position {
    color: #0B80C3;
    padding-bottom: 3%;
  }
  
  .header-title {
    margin-top: 2%;
    margin-bottom: 2%;
    text-align: center;
  }
  
  .img-responsive {
    margin-bottom: 5%;
  }
  */
  
  /* End of style for the bio of the management */
  
  /* Styling of the stat cards on the collaboration page */
  .collab > * {
    display: inline-block;
    margin-left: 1.5%;
    width: 23%;
    height: 180px;
    border-radius: 4%;
    vertical-align: bottom;
    background-color: #f5f5f5
  }
  
  .img-stat-collab {
    margin-top: 10%;
    max-height: 40px !important;
  }
  
  @media screen and (max-width: 600px) {
    .collab > * {
      width: 80%;
      display: block;
      margin-bottom: 15%;
      margin-left: 10%;
    }
    .img-stat-collab {
      padding-top: 10%;
      max-height: 60px !important;
  
    }
  }