.grad-archive-intro {
  background: rgb(245, 139, 8);
  background: linear-gradient(180deg, rgba(245, 139, 8, 1) 0%, rgba(255, 15, 123, 1) 100%);
}

.grad-artists-link {
  margin-top: 10px;
  margin-bottom: 0px;
}

.grad-grid-img {
  align-items: center;
  display: flex;
  justify-content: center;
  text-align: center;
}

.grad-logo {
  float: left;
  width: 50px;
  margin-right: 10px;
}

.grad-nav {
  display: flex;
  align-items: center;
}

.grad-nav,
.graduate h2.all-artists {
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid black;
}

.grad-single-feature-img {
  width: 50%;
}

.graduate-archive .grad-nav {
  border-bottom-color: black;
}

.grad-url-group {
  display: flex;
  flex-direction: row;
}

.grad-link,
.grad-twitter,
.grad-instagram {
  display: inline-flex;
}

.graduate .entry .js-wpv-loop-wrapper:first-of-type,
.grad-gallery {
  background-color: #4B4B4B;
}

.graduate .entry .grad-single-artist-index .js-wpv-loop-wrapper:first-of-type {
  background-color: transparent;
}

.graduate #footer {
  border-top: none;
}

.graduate h3 a {
  color: #4B4B4B;
}

.graduate .js-wpv-loop-wrapper h3,
.graduate .js-wpv-loop-wrapper p,
.grad-purchase-link a,
.grad-purchase-link {
  text-align: center;
  color: #aeaeae;
}

.grad-purchase-link a {
  border-bottom: 3px solid #ADADAD;
  font-weight: 900;
}

.graduate .js-wpv-loop-wrapper h3 {
  font-weight: 600;
  font-size: 1.214em;
}

.graduate h1,
.graduate h2,
.graduate h2.all-artists {
  font-display: swap;
  font-family: termina, sans-serif;
  font-weight: 600;
  font-style: normal;
}

.graduate .entry p,
p.grad-artists-link a,
.grad-bio p,
.grad-link,
.grad-twitter,
.grad-instagram,
.grad-purchase-link a {
  font-family: 'Raleway', sans-serif;
  font-display: swap;
}

.grad-bio p,
.grad-link,
.grad-twitter,
.grad-instagram,
p.grad-artists-link a {
  font-size: 1em;
  line-height: 1.68em;
}

p.grad-artists-link a {
  text-transform: uppercase;
  position: relative;
  top: -5px;
}

.grad-bio p,
.grad-link,
.grad-twitter,
.grad-instagram,
p.grad-artists-link a,
h1.grad-title-thesis a:hover {
  color: black;
}

.grad-bio p {
  font-weight: bold;
}

.grad-link a,
.grad-twitter a,
.grad-instagram a {
  border-bottom: solid black 4px;
  color: black;
  margin-right: 15px;
}

h1.grad-title-thesis {
  margin-top: 0px;
  margin-bottom: 0px;
  line-height: 0.8em;
}

.graduate h1,
.graduate h2.all-artists,
.grad-artists-link,
.grad-link,
.grad-twitter,
.grad-instagram {
  font-weight: 900;
}

.graduate-archive h2.header-xxl,
.graduate-archive .grad-bio p,
.graduate-archive p.grad-artists-link a {
  color: white;
}

.graduate h1 a {
  font-size: 0.8em;
}

.graduate h2.header-xxl {
  font-size: 2.7em;
}

/* graduate warning box modal start */

.modal {
  display: none;
  position: fixed;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  position: relative;
  background-color: white;
  padding: 20px;
  margin: auto;
  width: 75%;
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

.close-btn {
  float: right;
  color: lightgray;
  font-size: 24px;
  font-weight: bold;
}

.close-btn:hover {
  color: darkgray;
}

@-webkit-keyframes animatetop {
  from {
    top: -300px;
    opacity: 0
  }

  to {
    top: 0;
    opacity: 1
  }
}

@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0
  }

  to {
    top: 0;
    opacity: 1
  }
}

/* grad warning box modal END */


/* Extra Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}

@media (min-width: 768px) {
  .grad-artists-link {
    margin-top: 0px;
  }

  .grad-grid-img {
    height: 215px;
  }

  .grad-logo {
    width: 60px;
    margin-right: 20px;
  }

  .grad-single-feature-img {
    width: 100%;
  }

  p.grad-artists-link a {
    top: 0px;
  }

  h1.grad-title-thesis {
    margin-top: 15px;
    margin-bottom: 10px;
  }

  .graduate h2.header-xxl {
    font-size: 3.7em;
  }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {

  .grad-bio p,
  .grad-link,
  .grad-twitter,
  .grad-instagram,
  p.grad-artists-link a {
    font-size: 1.35em;
  }

  .grad-bio {
    width: 75%;
  }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .graduate h2.header-xxl {
    margin-top: 15px;
  }
}