/* Fonts and colors */
.number {
  position: absolute;
  font-size: 16rem;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.15);
  top: -7rem;
  left: 0rem;
  z-index: -2;
}

.step:hover .number {
  color: rgba(0, 208, 255, 0.5);
}

p.smaller {
  font-size: 0.8rem;
}

.cyan-underline {
  text-decoration: underline;
  color: #00d0ff;
}

.gray-diag {
  background: rgba(0, 0, 0, 0.075);
  background: -webkit-linear-gradient(-70deg, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.04) 50%);
  background: -o-linear-gradient(-70deg, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.04) 50%);
  background: -moz-linear-gradient(-70deg, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.04) 50%);
  background: linear-gradient(-70deg, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.04) 50%);
}

.gray-diag-2 {
  background: rgba(0, 0, 0, 0.075);
  background: -webkit-linear-gradient(60deg, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0.08) 50%);
  background: -o-linear-gradient(60deg, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0.08) 50%);
  background: -moz-linear-gradient(60deg, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0.08) 50%);
  background: linear-gradient(60deg, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0.08) 50%);
}

h1.bigger {
  font-size: 3.5rem;
}

@media (max-width: 848px) {
  h1.bigger {
    font-size: 3rem;
  }

  p.header {
    font-size: 1.75rem;
  }
}

@media (max-device-width: 848px) {
  h1.bigger {
    font-size: 3rem;
  }

  p.header {
    font-size: 1.75rem;
  }
}

.code, footer h1, .navbar-brand {
  font-family: 'code_boldregular', serif;
}

.special {
  font-family: 'Palanquin Dark', 'Roboto', sans-serif;
}

.tight {
  line-height: 1;
}

.center .btn {
  margin: 0.25rem;
}

.cyan {
  background: #00d0ff;
}

.yellow {
  background: #fcd702;
}

.progress {
  border-radius: 0px;
  height: 0.25rem;
  background: #00d0ff;
}

.progress.thick {
  height: 0.5rem;
}

.progress-bar {
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.cyan-text,
a.cyan-text,
.cyan-text:hover {
  color: #00d0ff;
}

.yellow-text {
  color: #fcd702;
}

.cyan-text-hover:hover, a.cyan-text-hover:hover, a.white-text.cyan-text-hover:hover, .navbar-brand.cyan-text-hover:hover {
  color: #00d0ff;
}

.cyan-text-hover:hover span.yellow-text-hover, a.cyan-text-hover:hover span.yellow-text-hover, a.white-text.cyan-text-hover:hover span.yellow-text-hover {
  color: #fcd702;
}

.yellow-text-hover:hover, a.yellow-text-hover:hover, a.white-text.yellow-text-hover:hover {
  color: #fcd702;
}

.black-text {
  color: black;
}

.white-text {
  color: white;
}

#video {
  margin-top: 20vh;
}

.white-video-border {
  background: white;
  padding: 0.5rem 0.5rem 0rem 0.5rem;
  border-radius: 0.25rem;
  display: table;
  width: 100%;
}

.white-video-border .btn {
  display: table-cell;
}


/* images */

#philly {
  background-image: url('../img/philly.jpg');
}

.hero-min-height {
  min-height: 50vh;
}

p.header {
  font-size: 2rem;
  line-height: 1.15;
}

p.bigger {
  font-size: 1.25rem;
}

.gradient {
  animation-duration: 3s;
  animation-name: changeGradient;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.gradient-2 {
  background: #00d0ff;
  background: #fcd702;
  background: -webkit-linear-gradient(left top, #00d0ff 60%, #fcd702 40%);
  background: -o-linear-gradient(bottom right, #00d0ff 60%, #fcd702 40%);
  background: -moz-linear-gradient(bottom right, #00d0ff 60%, #fcd702 40%);
  background: linear-gradient(to bottom right, #00d0ff 60%, #fcd702 40%);
}

@keyframes changeGradient {
  from {
    background: rgba(0, 255, 255, 0.1);
  }
  to {
    background: rgba(0, 200, 255, 0.3);
  }
}

.overlay {
  background-image: url('../img/overlay.png');
  background-attachment: fixed;
}

@media screen and (max-device-width: 1024px) {
  .overlay {
    background-attachment: scroll;
  }
}


/* absolute positioning */

.half-up {
  transform: translateY(-50%);
}

.circle {
  border-radius: 50%;
  display: table;
  height: 3.5rem;
  width: 3.5rem;
}

.action-bubble {
  z-index: 1;
  background: #0275d8;
  border-radius: 1.5rem;
  right: 5%;
  padding: 0.75rem 0rem;
}

.action-bubble:hover {
  background: #3490df;
}

.action-bubble .fa {
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.action-bubble:hover .fa {
  transform: translateX(0.25rem);
}

.action-bubble a {
  color: white;
  font-weight: bold;
  text-decoration: none;
  padding: 0.75rem 1.25rem;
}

.circle:hover {
  transform: translateY(0.125rem);
}

.circle .fa {
  display: table-cell;
  vertical-align: middle;
}

.center {
  text-align: center;
}

/**
 * Random
 */

.pad-sides {
  padding: 0 5%;
}

#stats {
  padding-top: 3rem;
  padding-bottom: 3rem;
  text-align: center;
}

.stat {
  display: inline-block;
  text-align: center;
  margin: 1rem;
}

.stat h2 {
  font-size: 2.5rem;
}

.article {
  background: white;
  border-top: 0.5rem solid black;
  padding: 1rem;
  overflow: hidden;
  margin-bottom: 2rem;
}

a .article:hover h4 {
  color: #00d0ff;
}

a .article:hover {
  border-top: 0.5rem solid #00d0ff;
}

.article .article-image {
  text-align: center;
  padding-bottom: 1rem;
}

.article img {
  display: inline-block;
  height: 6rem;
  -webkit-filter: grayscale(100%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}


/* Carousel */

.carousel {
  background: black;
  height: 70vh;
  width: 100%;
  overflow: hidden;
}

.carousel-item {
  width: 100%;
  height: 70vh;
  overflow: hidden;
}

.gradient-carousel {
  height: 100%;
  width: 100%;
}

.gradient-carousel .overlay {
  height: 100%;
  width: 100%;
}

.carousel-caption {
  display: flex;
  padding: 0 10vw;
  text-align: left;
  flex-direction: column;
  height: 70vh;
  top: 0;
  justify-content: center;
}

.carousel-caption h3 {
  font-size: 3rem;
}

.carousel-caption p {
  font-size: 1.5rem;
}

@media screen and (max-width: 720px) {
  .carousel-caption h3 {
    font-size: 2.5rem;
  }

  .carousel-caption p {
    font-size: 1.25rem;
  }
}

/*
** Branches
*/

.division {
  text-align: center !important;
}

.branch-img {
  margin-bottom: 1rem;
  margin-right: 35%;
  margin-left: 35%;
}


/*
** Partners
*/

.partners-wrapper {
  width: 100%;
  overflow: hidden;
}

.partners {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

@media screen and (max-device-width: 1024px) {
  .partners-wrapper {
    overflow-x: scroll;
  }
  .partners {
    justify-content: flex-start;
    width: 160vw;
  }
}

@media screen and (max-width: 684px) {
  .partners-wrapper {
    overflow-x: scroll;
  }
  .partners {
    justify-content: flex-start;
    width: 160vw;
  }
}

@media screen and (max-width: 480px) {
  .partners {
    width: 200vw;
  }
}

.partner {
  margin: 1rem;
}

.partner a img {
  height: 3rem;
  filter: grayscale(100%);
  opacity: 0.75;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.partner a img.short {
  height: 2.5rem;
}

.partner a img.tall {
  transform: scale(1.25);
  margin: 0 0.25rem;
}

.partner a img.taller {
  transform: scale(1.75);
  margin: 0 0.5rem;
}

.partner a img:hover {
  opacity: 1;
}

.partner a img.darken {
  filter: grayscale(100%) brightness(0);
}

@media (max-width: 848px) {
  .partner a img {
    height: 2.5rem;
  }

  .partner a img.short {
    height: 2.25rem;
  }
}

/**
 * Background graphic
 */
.background-graphic {
  width: 100%;
  height: 60vh;
  position: absolute;
  z-index: -1;
  top: 50px;
}

.background-fade {
  position: absolute;
  width: 100%;
  top: 0;
  height: 60vh;
  z-index: -3;
  background-image: linear-gradient(to bottom, rgba(0, 208, 255, 0.4), rgba(0, 0, 0, 0));
}

.slice {
  position: absolute;
  width: 100%;
}

.slice-2 {
  top: 0vh;
  height: 40vh;
  z-index: -1;
  background: -webkit-linear-gradient(right top, rgba(0, 208, 255, 0.2) 50%, rgba(0, 208, 255, 0) 50%);
  background: -o-linear-gradient(bottom left, rgba(0, 208, 255, 0.2) 50%, rgba(0, 208, 255, 0) 50%);
  background: -moz-linear-gradient(bottom left, rgba(0, 208, 255, 0.2) 50%, rgba(0, 208, 255, 0) 50%);
  background: linear-gradient(to bottom left, rgba(0, 208, 255, 0.2) 50%, rgba(0, 208, 255, 0) 50%);
}

.slice-1 {
  top: 0vh;
  height: 60vh;
  z-index: -2;
  background: -webkit-linear-gradient(-15deg, #ffffff 50%, rgba(0, 208, 255, 0.3) 50%);
  background: -o-linear-gradient(-15deg, #ffffff 50%, rgba(0, 208, 255, 0.3) 50%);
  background: -moz-linear-gradient(-15deg, #ffffff 50%, rgba(0, 208, 255, 0.3) 50%);
  background: linear-gradient(-15deg, #ffffff 50%, rgba(0, 208, 255, 0.3) 50%);
}

.dots {
  width: 100%;
  height: 100%;
  background-image: url('../img/dot.png');
  position: absolute;
  top: 0;
  z-index: 0;
}

.dots-wrapper {
  background-image: url('../img/dot.png');
  overflow: hidden !important;
}

.slice-3 {
  top: 40vh;
  height: 20vh;
  z-index: 1;
  background: rgba(0, 0, 0, 0);
  background: -webkit-linear-gradient(rgba(255, 255, 255, 0), #ffffff);
  background: -o-linear-gradient(rgba(255, 255, 255, 0), #ffffff);
  background: -moz-linear-gradient(rgba(255, 255, 255, 0), #ffffff);
  background: linear-gradient(rgba(255, 255, 255, 0), #ffffff);
}

.slice-4 {
  top: 0vh;
  height: 60vh;
  background: rgba(252, 215, 2, 0.5);
  z-index: 2;
  background: -webkit-linear-gradient(185deg, rgba(252, 215, 2, 0.3) 50%, rgba(0, 0, 0, 0) 50%);
  background: -o-linear-gradient(185deg, rgba(252, 215, 2, 0.3) 50%, rgba(0, 0, 0, 0) 50%);
  background: -moz-linear-gradient(185deg, rgba(252, 215, 2, 0.3) 50%, rgba(0, 0, 0, 0) 50%);
  background: linear-gradient(185deg, rgba(252, 215, 2, 0.3) 50%, rgba(0, 0, 0, 0) 50%);
}

.slice-5 {
  height: 36rem;
  z-index: -2;
  background: -webkit-linear-gradient(-50deg, #ffffff 30%, rgba(0, 208, 255, 0.1) 30%);
  background: -o-linear-gradient(-50deg, #ffffff 30%, rgba(0, 208, 255, 0.1) 30%);
  background: -moz-linear-gradient(-50deg, #ffffff 30%, rgba(0, 208, 255, 0.1) 30%);
  background: linear-gradient(-50deg, #ffffff 30%, rgba(0, 208, 255, 0.1) 30%);
}

.slice-6 {
  height: 36rem;
  z-index: -1;
  background: -webkit-linear-gradient(-60deg, transparent 50%, rgba(0, 208, 255, 0.2) 30%);
  background: -o-linear-gradient(-60deg, transparent 50%, rgba(0, 208, 255, 0.2) 30%);
  background: -moz-linear-gradient(-60deg, transparent 50%, rgba(0, 208, 255, 0.2) 30%);
  background: linear-gradient(-60deg, transparent 50%, rgba(0, 208, 255, 0.2) 30%);
}

.slice-7 {
  height: 36rem;
  z-index: -1;
  background: -webkit-linear-gradient(-30deg, rgba(252, 215, 2, 0.2) 50%, transparent 30%);
  background: -o-linear-gradient(-30deg, rgba(252, 215, 2, 0.2) 50%, transparent 30%);
  background: -moz-linear-gradient(-30deg, rgba(252, 215, 2, 0.2) 50%, transparent 30%);
  background: linear-gradient(-30deg, rgba(252, 215, 2, 0.2) 50%, transparent 30%);
}

 /**
  * Quad
  */

.quad {
  color: white !important;
  padding: 4rem 2rem 3rem 2rem;
}

.cyan-tint {
  background: rgba(0, 208, 255, 0.3);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.quad-img {
  position: absolute;
  z-index: -2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: brightness(0.7);
}

.quad p {
  font-size: 1.2rem;
}

#bg1 {
  background-image: url('../img/bg1.jpg');
}

#bg2 {
  background-image: url('../img/bg2.jpg');
}

#bg3 {
  background-image: url('../img/bg3.jpg');
}

#bg4 {
  background-image: url('../img/bg4.jpg');
}

/**
 * Time
 */
.year {
  display: flex;
}

.year .date {
  font-size: 3rem;
}

.year h1 {
  width: 136px;
  display: block;
}

.timeline-spacer {
  display: inline-block;
  margin-left: 228px;
  width: 0.5rem;
  height: 2rem;
  background: #00d0ff;
  transform: translateY(3.5px);
}

.year-content {
  padding: 1rem;
  background: white;
  flex: 1;
  box-shadow: -2px 2px 0px rgba(0, 0, 0, 0.15);
}

/**
 * Get involved
 */
.method {
  margin-bottom: 1rem;
}

.method p {
  margin-bottom: 0rem;
}

.margin-left-1 {
  margin-left: 1rem;
}

/*
** Core team
*/
.person.card {
  border-radius: 0px;
  margin-bottom: 2rem;
}

.person.card a {
  font-size: 0.75rem;
}

.person.card .card-img-top {
  height: 30vh !important;
  min-width: 100%;
  border-radius: 0px;
}

.person.card p {
  margin-bottom: 0.25rem;
}