/* GLOBAL STYLES */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 120px;
}
h3 {
  font-weight: 100;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 120px;
}
.subHead {
  font-size: 1.1em;
}
.emph {
  padding: 2px 8px 6px 8px;
  border: 1px solid #749bc2;
  color: #749bc2;
  background-color: #fff;
  font-weight: 400;
}

/* TEXT */
.homeCards .card-title {
  font-size: 2rem;
}
.workCards .card-subtitle {
  color: #749bc2;
}
.display-4, .card-title, .navContent a {
  font-family: 'Merienda', cursive;
}
.display-5 {
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.1;
}
.display-6 {
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.2;
}
.jrTitle {
  position: relative;
  top: 50px;
  opacity: 0;
}

/* CONTAINERS */
.homeCards .card {
  border: none;
  overflow: hidden;
  transition-duration: 200ms;
}
.nestedContent {
  border-bottom: 0px solid rgba(116,155,194,0.5);
  border-left: 4px solid #749bc2;
  border-right: 4px solid #749bc2;
  border-radius: 1rem;
  padding: 1.5rem;
  margin: 2rem 1rem;
  /*box-shadow: -10px 0px 0px rgba(0,0,0,0.05), 10px 0px 0px rgba(0,0,0,0.05);*/
}
.carousel {
  background-color: #749bc2;
  border-radius: 1rem;
  padding: 0px 20px 0px 20px;
}

/* LINKS */
.navContent a {
  padding: 0 20px 0 20px;
}
.navContent a:hover {
  text-decoration: none !important;
  color: red !important;
}
.navContent a:hover h5 {
  color: #749bc2 !important;
}
.jrBrand:hover {
  text-decoration: none;
  color: #fff;
}
.colLink {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 10;
}
.cta {
  cursor: pointer;
}

/* BUTTONS */
.jrNavButton {
  position: relative;
  border: none;
  background-color: #343a40;
  top: 5px;
  transform: scale(0.7);
  -webkit-transform: scale(0.7);
  transition-duration: 100ms;
}
.jrNavButton:focus {
  outline: none;
  top: 10px;
}
.jrNavButton:hover {
  top: 10px;
}
.btn {
  font-size: 1.2rem;
}
.card .btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
}
.btn i {
  padding-left: 10px;
  position: relative;
}
.btn-outline-main {
    color: #749bc2;
    border-color: #749bc2;
}
.btn-outline-main:hover {
    color: #fff;
    background-color: #749bc2;
    border-color: #749bc2;
}

/* COLORS */
.text-main {
  color:#749bc2;
}
.bg-muted {
  background-color: #6c757d !important;
}
.bg-main {
  background-color: #749bc2;
}
/* ANIMATIONS */
.delay-300ms {
  animation-delay: 300ms;
}
.delay-600ms {
  animation-delay: 600ms;
}
.moveR-10 {
  margin-right: 10px;
}
@keyframes cardimg {
  from {
    filter: grayscale(90%);
    transform: scale(1);
    -webkit-transform: scale(1);
    color: inherit;
  }
  to {
    filter: grayscale(0%);
    transform: scale(1.02);
    -webkit-transform: scale(1.02);
    color: #749bc2;
  }
}

/* IMAGES */
.homeCards img {
  transition-duration: 200ms;
  transform: scale(1.05);
  filter: grayscale(90%);
  filter: blur(5px);
  opacity: 0.25;
  position: relative;
}
.workCards .card img {
  max-height: 250px;
  padding-bottom: 20px;
  margin: 0 auto;
  display: block;
  max-width: 100%;
  width: auto;
}
.workCards .card {
  margin: 20px;
}
.colLink:hover ~ div > img {
  filter: grayscale(0%);
}
.bioImage {
  width: 100%;
  border-radius: .25rem;
  margin-bottom: 10px;
}
.profileImageMobile {
  display: none;
}
.profileImage {
  background-image: url('../images/jr2018.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 400px;
}

/* MOBILE */
@media only screen and (max-width: 1390px) {
  .card {
    margin: 10px;
    width: 22rem !important;
  }
  .nestedContent .d-flex {
      justify-content: center !important;
      width: 22rem !important;
  }
}
@media only screen and (max-width: 875px) {
  .profileImage {
    display: none;
  }
  .profileImageMobile {
    display: block;
  }
}
@media only screen and (max-width: 661px) {
  .emph {
    padding: 0px;
    border: none;
    color: #749bc2;
    font-weight: bold;
  }
}
@media only screen and (max-width: 465px) {
  .navContent {
    display: block !important;
  }
  .nestedContent {
    margin: 1rem 5px;
  }
}