html {
  font-family: 'Roboto', sans-serif;

}

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

nav {
  text-align: right;
  padding-right: 2rem;
}

li a:hover {
  color: #02163f;
}

.reg-btn:hover {
  color: #02163f;
}

.link:hover {
  color: #02163f;
}

.nav a {
  color: #686868;
  text-decoration: none;
  text-align: center;
}

.nav li a:hover {
  color: #02163f;
}

/*
header {
  background-size: cover;
  background-position: center top;
  width: 100%;
  background-color: #fff;
} */

/* .intro {
  max-width: 960px;
  margin: 0 auto;
  padding: 8% 0;
} */

.intro-1 {
  font-size: 3em;
  text-align: center;
  color: #c59c95;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 800;
  line-height: 1.5em;
}

.intro-2 {
  font-size: 2em;
  text-align: center;
  color: #02163f;
  font-weight: 300;
  text-transform: capitalize;
}

.intro-404-1 {
  font-size: 5em;
  text-align: center;
  color: #c59c95;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 800;
  line-height: 1.5em;
}

.intro-404-2 {
  font-size: 2em;
  text-align: center;
  color: #02163f;
  font-weight: 300;
  text-transform: capitalize;
}

.p-404 {
  text-align: left;
}

.reg-btn {
  margin: 0;
  border: 2px solid #c59c95;
  padding: 1em 3em;
  display: inline-block;
  transition: .3s ease;
}

.img-flex-adorit {
  padding-top: 3rem;
}

.img-flex-wolf {
  padding-top: 2rem;
  padding-bottom: 5rem;
}

h1 {
  color: #c59c95;
}

h3 {
  color: #c59c95;
}

.adorit {
  color: #ad3973;
  padding-top: 2rem;
  margin: auto;
}

.ats {
  color: #8785be;
  padding-top: 2rem;
  margin: auto;
}

.wolf {
  color: #7e1519;
  padding-top: 2rem;
  margin: auto;
}

.infographic {
  color: #8d3038;
  padding-top: 2rem;
  margin: auto;
}

.big-magic {
  color: #b5899d;
  padding-top: 2rem;
  margin: auto;
}

.boomerang {
  color: #2e5189;
  padding-top: 2rem;
  margin: auto;
}

.captions {
  text-align: center;
  padding-top: 1rem;
  padding-bottom: 3rem;
}

.card-title {
  color: #02163f;
}

.card-text {
  color: #111;
}

.about-intro {
  background-color: #e5e5e5;
}

.about-intro p {
  font-family: Roboto,sans-serif;
  font-style: normal;
  font-weight: 300;
  line-height: 1.8;
  color: #111;
}

.pad-b {
  padding-bottom: 3rem;
}

.text-center {
  padding-top: 2rem;
}

.about {
  text-align: left;
  padding-top: 2rem;
}

.island-half, .island-1-2 {
  padding: .65rem;
}

/* .embed {
  position: relative;
} */

/* .embed__item {
  position: absolute;
  left: 0;
  width: 100;
  height: 100;
  top: 0;
} */

.embed-adorit {
  position: relative;
  padding-bottom: 7rem;
}

.embed-wolf {
  position: relative;
  padding-bottom: 25rem;
}

.embed-wolf-wolf {
  position: relative;
  padding-bottom: 7rem;
}

.embed-boomerang {
  position: relative;
  padding-bottom: 7rem;
}

.project-card-container {
  text-decoration: none;
  /* transition: all .35s ease-in-out; */
}

.card-1 .card-text-1 {
  display: none;
}

.card-1:hover .card-text-1 {
  display: inline-block;
  position: absolute;
  color: #02163f;
  text-align: center;
}

.card-1:hover img {
  opacity: .2;
}

.social {
  text-align: center;
  color: #686868;
  padding-top: 6rem;
  padding-bottom: 0;
}

.copyright {
  color: #02163f;
}


@media only screen and (min-width: 20em) {


nav {
    text-align: center;
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .about p {
    text-align: left;
  }

.about-intro p {
    text-decoration: center;
  }

.about-intro {
    background-color: #e5e5e5;
  }

h3 {
    text-align: center;
    padding-right: 1rem;
  }

h4 {
    text-align: center;
    padding-right: 1rem;
  }

p {
    text-align: center;
    padding-right: 1rem;
  }

}

@media only screen and (min-width: 36em) {


nav {
    text-align: right;
    padding-right: 1rem;
  }

h3 {
    text-align: center;
    padding-right: 1rem;
    padding-top: 3rem;
  }

h4 {
    text-align: left;
    padding-right: 1rem;
  }

p {
    text-align: left;
    padding-right: 1rem;
    margin: auto;
  }

.names {
    text-align: center;
    color: #7e1519;
  }

.card-text {
    text-align: center;
  }

.card-title {
  text-align: center;
  }

}