@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


.bb-hero {
  position: relative; 
}

.bb-hero-1 {
  text-align: center;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.bb-hero-2 {
  text-align: center;
  position: absolute;
  top: 20%;
  transform: translate(-50%, -50%);
  left: 50%;
  width: 100%;

}

.bb-hero-3 {
  text-align: center;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;

}

.bb-hero-4 {
  text-align: center;
  position: absolute;
  top: 20%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
}

.bb-hero-5 {
  text-align: center;
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  transform: translate(-50%, -50%);
  top: 70%;
}

.bb-hero-6 {
  text-align: center;
  position: absolute;
  top: 20%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
}

.bb-color-black {
  color: black;
}

.bb-color-white {
  color: white;
}

.bb-hero h3 {
  font-weight: bold;
  font-size: 2rem;
  margin-bottom: 20px;
  font-family: 'roboto', sans-serif;
}

.bb-hero p {
  font-size: 1.5em;
  font-weight: 400;
  font-family: 'roboto', sans-serif;
}

.video-container {
                position:relative;                
                padding-bottom:56.25%;    
                width:100%;
                overflow:hidden;
                margin-bottom:50px
}
.video-container iframe, .video-container object, .video-container embed {
                position:absolute;
                top:0;
                left:0;
                width:100%;
                height:100%;
}

.bb-starter {
	text-align: center;
}

.bb-section-split {
	background-color: black;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}
.bb-section-split > h4 {
	color: white;
	font-size: 4rem;
	font-weight: 600;
  line-height: 1.3;
}

.bb-feature-section {
  text-align: center;
}

.bb-feature-section img {
  margin-bottom: 8px;
}

.bb-feature-section p {
  margin-bottom: 40px;
  font-weight: 400;
  line-height: 1.5;
}

.bb-feature-section h6 {
  font-weight: 600;
  margin-bottom: 20px;
}

.bb-sixer-section {
    margin-bottom: 30px;
}

.bb-sixer-section p {
  line-height: 1.5; 
}


.bb-sixer-section h5 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 20px;
}

.bb-feature-section-full > h4 {
    font-size: 2.2rem;
}

.bb-feature-section-full > hr {
    margin-top: 10px;
    border: 1px solid black;
}

/* Bootstrap */
.bb-row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.bb-row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

@media (min-width: 576px) {
  .col-sm {
    flex: 1 0 0%;
  }
  .row-cols-sm-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-sm-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-sm-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-sm-3 > * {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .row-cols-sm-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-sm-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-sm-6 > * {
    flex: 0 0 auto;
    width: 16.66666667%;
  }


  .bb-col-sm-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .bb-col-sm-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .bb-col-sm-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .bb-col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .bb-col-sm-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .bb-col-sm-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .bb-col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .bb-col-sm-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .bb-col-sm-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .bb-col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .bb-col-sm-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .bb-col-sm-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .bb-col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }

    .offset-sm-0 {
    margin-left: 0;
  }
  .offset-sm-1 {
    margin-left: 8.33333333%;
  }
  .offset-sm-2 {
    margin-left: 16.66666667%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  .offset-sm-4 {
    margin-left: 33.33333333%;
  }
  .offset-sm-5 {
    margin-left: 41.66666667%;
  }
  .offset-sm-6 {
    margin-left: 50%;
  }
  .offset-sm-7 {
    margin-left: 58.33333333%;
  }
  .offset-sm-8 {
    margin-left: 66.66666667%;
  }
  .offset-sm-9 {
    margin-left: 75%;
  }
  .offset-sm-10 {
    margin-left: 83.33333333%;
  }
  .offset-sm-11 {
    margin-left: 91.66666667%;
  }
}

.bb-md-visible {
  display: none !important;
}

.bb-md-invisible {
  display: block !important;
}


@media (min-width: 768px) {
    .bb-hero-1 {
    text-align: left;
    position: absolute;
    left: 2%;
    top: 30%;
    transform: initial;
  }

  .bb-hero-2 {
    text-align: left;
    position: absolute;
    left: 2%;
    transform: initial;

    top: 0%;
  }

  .bb-hero-3 {
    text-align: right;
    position: absolute;
    right: 2%;
    transform: initial;
    top: 0%;
    left: initial;
  }

  .bb-hero-4 {
    text-align: right;
    position: absolute;
    right: 2%;
    transform: initial;
    top: 0%;
    left: initial;
  }

  .bb-hero-5 {
    text-align: left;
    position: absolute;
    left: 2%;
    transform: initial;
    bottom: 10%;
    top: 0;
  }

  .bb-hero-6 {
    text-align: left;
    position: absolute;
    left: 2%;
    transform: initial;
    top: 0%;
  }

    .bb-hero h3 {
    font-weight: bold;
    font-size: 5rem;
    margin-bottom: 20px;
    font-family: 'roboto', sans-serif;
    display: block;
  }

  .bb-hero p {
    font-size: 2.2rem;
    font-weight: 400;
    font-family: 'roboto', sans-serif;
  }

  .bb-md-visible {
    display: block !important;
  }
  
  .bb-md-invisible {
    display: none !important;
  }

  .bb-col-md {
    flex: 1 0 0;
  }
  .bb-col-md-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .bb-col-md-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .bb-col-md-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .bb-col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .bb-col-md-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .bb-col-md-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .bb-col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .bb-col-md-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .bb-col-md-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .bb-col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .bb-col-md-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .bb-col-md-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .bb-col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-md-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-md-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-md-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-md-3 > * {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .row-cols-md-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-md-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-md-6 > * {
    flex: 0 0 auto;
    width: 16.66666667%;
  }

  .col-md {
    flex: 1 0 0;
  }
}