/* GLOBAL STYLES */

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


/* BASE STYLES */

a {
  color: #000;
  text-decoration: none;
}

h1,
h3 {
  font-family: 'Delius', cursive;
}

section p {
  text-align: left;
}

section p,
figcaption {
  font-family: 'Hind', sans-serif;
  font-size: 22px;
}


/*BODY STYLES */

body {
  background-color: #fff;
  margin: 0;
}

.team-profiles {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  list-style-type: none;
  padding: 0;
}


/* NAV STYLES */

#navigation-sticky.dark-nav {
    background-color: #fff;
    box-shadow: 0 0 10px #028090;
}

header, footer {
      background: #D1D7D7; /*#028090;*/
    color: #0095B7;/*#FFF;*/
     background-color: #fff;
    box-shadow: 0 0 10px #028090;
}

/* MAIN CONTENT STYLES */

.content-section {
  border-bottom: solid 3px black;
  border-top: solid 3px black;
  margin: 1em auto;
  padding: 2px 20px 10px;
  width: 100%;
}

.our-mission {
  background-color: #def9ff;
}

.our-vision {
  background-color: #fedcd6;
}

.meet-the-team {
  background-color: #ccfff2;
}

.section-headers {
  font-size: 2.5em;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}

.team-member {
  background-color: #fff;
  border: solid 3px black;
  margin: 10px;
  padding: 10px;
  position: relative;
  text-align: center;
  width: 100%;
}

.profile-picture {
  height: auto;
  width: 70%;
  margin-bottom: 15px;
  border-radius: 15px;
-ms-interpolation-mode: bicubic;
}

.sarah-pic {
  -webkit-box-shadow: 3px 3px 30px 3px rgba(11, 207, 157, 1);
  -moz-box-shadow: 3px 3px 30px 3px rgba(11, 207, 157, 1);
  box-shadow: 3px 3px 30px 3px rgba(11, 207, 157, 1);
}

.aly-pic {
  -webkit-box-shadow: 3px 3px 30px 3px rgba(204, 167, 218, 1);
  -moz-box-shadow: 3px 3px 30px 3px rgba(204, 167, 218, 1);
  box-shadow: 3px 3px 30px 3px rgba(204, 167, 218, 1);
}

.fatemeh-pic {
  -webkit-box-shadow: 3px 3px 30px 3px rgba(161, 93, 187, 1);
  -moz-box-shadow: 3px 3px 30px 3px rgba(161, 93, 187, 1);
  box-shadow: 3px 3px 30px 3px rgba(161, 93, 187, 1);
}

.jennifer-pic {
  -webkit-box-shadow: 3px 3px 30px 3px rgba(81, 186, 208, 1);
  -moz-box-shadow: 3px 3px 30px 3px rgba(81, 186, 208, 1);
  box-shadow: 3px 3px 30px 3px rgba(81, 186, 208, 1);
}

.crystal-pic {
  -webkit-box-shadow: 3px 3px 30px 3px rgba(255, 180, 187, 1);
  -moz-box-shadow: 3px 3px 30px 3px rgba(255, 180, 187, 1);
  box-shadow: 3px 3px 30px 3px rgba(255, 180, 187, 1);
}

.jamila-pic {
  -webkit-box-shadow: 3px 3px 30px 3px rgba(251, 172, 157, 1);
  -moz-box-shadow: 3px 3px 30px 3px rgba(251, 172, 157, 1);
  box-shadow: 3px 3px 30px 3px rgba(251, 172, 157, 1);
}

.daphne-pic {
  -webkit-box-shadow: 3px 3px 30px 3px rgba(255, 155, 163, 1);
  -moz-box-shadow: 3px 3px 30px 3px rgba(255, 155, 163, 1);
  box-shadow: 3px 3px 30px 3px rgba(255, 155, 163, 1);
}

.marie-pic {
  -webkit-box-shadow: 3px 3px 30px 3px rgba(183, 192, 231, 1);
  -moz-box-shadow: 3px 3px 30px 3px rgba(183, 192, 231, 1);
  box-shadow: 3px 3px 30px 3px rgba(183, 192, 231, 1);
}

.member-name {
  margin-bottom: 20px;
  margin-top: 5px;
  text-align: center;
}

.member-description {
  font-size: 16px;
  list-style-type: none;
  margin: 10px 0 60px;
  padding: 0;
  text-align: center;
}

.bold-text {
  font-weight: bold;
}

.profile-figure {
  margin: 0;
}


/* SOCIAL LINKS */

.linkedin-custom {
  bottom: 20px;
  font-size: 3em;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  transition: .5s;
}

.social-sarah {
  color: #0bcf9d;
}

.social-sarah:hover {
  color: #06795c;
}

.social-alysha {
  color: #cca7da;
}

.social-alysha:hover {
  color: #a25dbb;
}

.social-fatemeh {
  color: #c093d2;
}

.social-fatemeh:hover {
  color: #a15dbb;
}

.social-jennifer {
  color: #51bad0;
}

.social-jennifer:hover {
  color: #1b5864;
}

.social-crystal {
  color: #ffb4bb;
}

.social-crystal:hover {
  color: #ff1a30;
}

.social-jamila {
  color: #fbac9d;
}

.social-jamila:hover {
  color: #7a1905;
}

.social-daphne {
  color: #ff9ba3;
}

.social-daphne:hover {
  color: #80000b;
}

.social-marie {
  color: #b7c0e7;
}

.social-marie:hover {
  color: #202c60;
}



/*RESPONSIVE RULES */

@media only screen and (min-width: 600px) {
  .content-section {
    border: solid 3px black;
    width: 90%;
  }

  .team-member {
    padding: 10px;
    text-align: center;
    width: 44%;
  }

  .profile-picture {
    height: auto;
    width: 60%;
  }

}

@media only screen and (min-width: 1020px) {
  .team-member {
    width: 22%;
  }
}