h1 {
  font-family: "Playfair Display", serif;
  color: #ffffff;
  font-style: italic; }

h2 {
  font-family: "Playfair Display", serif;
  color: #151515;
  font-style: italic; }

h2::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  margin-top: 20px;
  background-color: #adddd1;
  transition: all 0.3s ease 0s; }

h3 {
  font-family: "Playfair Display", serif;
  color: #151515;}

h4 {
  font-family: "Playfair Display", serif;
  font-style: italic;
  color: #151515;}

h4::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  margin-top: 20px;
  background-color: #adddd1; }

h5 {
  font-family: "Montserrat", sans-serif;
  color: #666666;
  text-transform: uppercase; }

h6 {
  font-family: "Montserrat", sans-serif;
  color: #999999;
  text-transform: uppercase; }

p {
  font-family: "Playfair Display", serif;
  color: #666666;}

a:link {
  text-decoration: none; }

.hero {
  max-width: 600px;
  font-weight: 600;
}

h5 a:link {
  color: #ffffff; }

h5 a:hover {
  color: #adddd1; }

.bio {
  margin-top: 10%;
  max-width: 600px;
  min-width: 320px; }

.private { display: none; }


/* For devices larger than 420px */
@media (min-width: 420px) {
  .private { display: none; }
  .bio { margin-top: 8%; }
  .hero { font-weight: 900; }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .private { display: none; }
  .bio { margin-top: 8%; }
  .hero { font-weight: 900; }
}

/* For devices larger than 750px */
@media (min-width: 750px) {
  .private { display: none; }
  .bio { margin-top: 6%; }
  .hero { font-weight: 900; }
}

/* For devices larger than 1000px */
@media (min-width: 1000px) {
  .private { display: block; }
  .bio { margin-top: 4%; }
  .hero { font-weight: 900; }
}

/* For devices larger than 1200px */
@media (min-width: 1200px) {
  .private { display: block; }
  .bio { margin-top: 4%; }
  .hero { font-weight: 900; }
}


.next h2 {
  font-family: "Playfair Display", serif;
  color: #ffffff;
  font-style: italic;
  transition: all 0.3s ease 0s;
}

.next h2::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  margin-top: 12px;
  background-color: #333;
  transition: all 0.3s ease 0s;
}

.next:hover h2 {
  transition: all 0.3s ease 0s;
}

.next:hover h2::after {
  content: "";
  display: block;
  width: 80px;
  height: 2px;
  margin-top: 12px;
  background-color: #333;
  transition: all 0.3s ease 0s;
}

.left {
  float: left; }

.right {
  float: right; }

.center {
  margin: 0 auto; }

.clear {
  clear: both; }

/* Fade-In Keyframes */
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
