/* top banner actually is in the same upper left corner as the navbar */

.navbar-top {
  width: 100vw;
  /*max-width: 100vw;*/
  background: rgb(255,255,255);
  height: 80px;
  padding-left: 6vw;
  padding-right: 6vw;
  z-index: 1;
}

/* needed for first element under nav because navbar locked to top. Top margin == .navbar height (floating) */

.navbar-top a {
  margin-left: 8px;
  font-size: 1.4em;
  text-transform: uppercase;
}

.nav.nav-pills.flex-column.nav-sidbar {
  color: rgb(4,14,24);
  opacity: 1;
}

.sidebar {
  background: rgba(160,154,154,0.11);
}

.navbar.navbar-light.navbar-expand-sm.fixed-top.d-flex.align-items-center.navbar-top {
}

#home_pic_container {
  position: relative;
}

.features-icons {
  padding-top: 7rem;
  padding-bottom: 7rem;
}

.icon_text {
  font-size: 67px;
  color: #0b75f7;
}

#homepage-heading-grid h1 {
  font-size: 2.5em;
}

#homepage-heading-grid h2 {
  font-size: 1.5em;
}

@media (min-width: 768px) {
  #homepage-heading-grid h1 {
    font-size: 3em;
  }
}

@media (min-width: 768px) {
  #hompage-heading-grid h2 {
    font-size: 1.8em;
  }
}

#home-card-group {
  color: black;
  padding-left: -8px;
}

.img-card-group {
  padding-top: 25px;
  width: 5.5em;
  margin-bottom: -5px;
}

/* offset cards from picture */

.container-mid-level {
  margin-top: -11vh;
}

/* Card Group Heading */

#home-card-group .card-title {
  font-size: 1.8rem;
  color: black;
  margin-bottom: 35px;
}

#home-card-group p {
  font-size: 1.2em;
}

/* card group divs are the actual cards, will outline them */

#home-card-group > div {
  box-shadow: inset 3px 3px 20px 0px rgba(9,65,109,0.8);
  border: 1px solid rgba(0,123,255,0.86);
}

#home-card-group li {
  text-decoration: underline;
  font-size: 1.2rem;
  padding-top: 0px;
  border: none;
  color: rgb(0,0,0);
  text-align: left;
}

.list-group-item {
  border: none;
}

#wrapper img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

img {
  /*vertical-align: middle;*/
  border-style: none;
  width: 100%;
  padding-right: 20px;
}

.row.row-heading {
  position: absolute;
  top: 25px;
}

.img-card-group:hover {
  transform: scale(1.2);
  transition: 0.3s all ease-in-out;
}

img.img-max {
  max-width: 800px;
}

/* force images on api reference page not to be so dominant */

img.img-framework-api {
  padding-bottom: 20px;
  width: 400px;
}

img.img-framework {
  width: 50%;
  padding-bottom: 20px;
  max-width: 500px;
  min-width: 400px;
}

#id-sandbox-place-holder-image {
  width: 50%;
  min-width: 200px;
  animation: rotation 6s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(-359deg);
  }
}

html {
  scroll-behavior: smooth;
}

#success {
  display: flex;
  flex-direction: column;
}