html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin top by brand image height */
  padding-top: 80px;
  /* Margin bottom by footer height */
  margin-bottom: 100px;
  font-family: 'Roboto', sans-serif;
}

.nav-item:hover {
  border-radius: 0.3rem;
  background-color: #dae0e5 !important;
}

.navbar-toggler-off-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  content: "";
  background: no-repeat center center;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg class='bi bi-x' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M11.854 4.146a.5.5 0 010 .708l-7 7a.5.5 0 01-.708-.708l7-7a.5.5 0 01.708 0z' clip-rule='evenodd'/%3E%3Cpath fill-rule='evenodd' d='M4.146 4.146a.5.5 0 000 .708l7 7a.5.5 0 00.708-.708l-7-7a.5.5 0 00-.708 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.link:hover, .link:focus {
  text-decoration: none;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* height: 100px; */
  /*Set the fixed height of the footer here */
  text-align: center;
  background: rgb(9, 95, 234);
}

.footer-bottom {
  width: auto;
  padding-top: 20px;
}

.iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.brand-name {
  font-size: 28pt;
  position: absolute;
  top: 1.5vh;
  color: rgba(117, 0, 255, 0.5) !important;
}

.pre-code {
  color: #e83e8c !important;
}

.custom-slider {
  height: 100% !important;
}

.custom-slider-2 {
  height: 40vh !important;
}

.wh-33 {
  width: 35% !important;
  height: 35% !important;
}

.wh-66 {
  width: 65% !important;
  height: 65% !important;
}

.custom-slider .carousel-control-prev,
.custom-slider .carousel-control-next {
  text-shadow: 2px 2px 4px #000000;
  font-size: 30px;
}

.custom-slider .carousel-inner {
  height: 100%;
}

.custom-slider .carousel-inner .carousel-item {
  height: 100%;
}

.custom-slider .carousel-inner .carousel-item .carousel-img-container {
  height: 100%;
}

.custom-slider .carousel-inner .carousel-item img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
}

.play-btn {
  width: 72px;
  height: 72px;
  left: 50%;
  top: 50%;
  position: absolute;
  background: url('../yt/play.png') no-repeat;
}

.player-container {
  width: 100%;
  display: block;
  position: relative;
  cursor: pointer;
  max-height: 315px;
  height: 100%;
  overflow: hidden;
  padding-bottom: 56.25%;
  margin: 0 auto
}

.player-preview {
  display: block;
  margin: auto;
  max-width: 100%;
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

ul.timeline {
  list-style-type: none;
  position: relative;
}

ul.timeline:before {
  content: ' ';
  background: #d4d9df;
  display: inline-block;
  position: absolute;
  left: 29px;
  width: 2px;
  height: 100%;
  z-index: 400;
}

ul.timeline>li {
  margin: 20px 0;
  padding-left: 20px;
}

ul.timeline>li:before {
  content: ' ';
  background: white;
  display: inline-block;
  position: absolute;
  border-radius: 50%;
  border: 3px solid #22c0e8;
  left: 20px;
  width: 20px;
  height: 20px;
  z-index: 400;
}

h1, h2, h3, h4 {
  font-family: 'Fira', sans-serif;
}