/**
 * 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;
}

.field.field--name-field-bio {
  margin-top: 10px;
}

/* 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;
  margin: 0;
}

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

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

/* 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;
  margin: 0;
}

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

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

/* 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;
  }
}

/* B&W / Colour Photo toggling */

.mgt-photo .wrapper-img-cards img {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
  -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
  -webkit-backface-visibility: hidden; /* Fix for transition flickering */
}

.mgt-photo img:hover {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
  -webkit-filter: grayscale(0%);
}
  
/* 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;
  }
}