* {
  font-family: "Open Sans", sans-serif;
}

/* ===== BUTTONS ===== */

.btn-nav:hover {
  background-color: #f9f9f9;
}

.btn-nav.active,
.btn-nav.btn-secondary.active {
  color: #ffffff !important;
  background: #0085EB;
  background: -webkit-linear-gradient(90deg, rgba(0, 133, 235, 1) 0%, rgba(0, 180, 255, 1) 100%);
  background: -moz-linear-gradient(90deg, rgba(0, 133, 235, 1) 0%, rgba(0, 180, 255, 1) 100%);
  background: linear-gradient(90deg, rgba(0, 133, 235, 1) 0%, rgba(0, 180, 255, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0085EB", endColorstr="#00B4FF", GradientType=1);
}

.btn-nav.active:hover {
  background: #0075DB;
  background: -webkit-linear-gradient(90deg, rgba(0, 117, 219, 1) 0%, rgba(0, 164, 239, 1) 100%);
  background: -moz-linear-gradient(90deg, rgba(0, 117, 219, 1) 0%, rgba(0, 164, 239, 1) 100%);
  background: linear-gradient(90deg, rgba(0, 117, 219, 1) 0%, rgba(0, 164, 239, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0075DB", endColorstr="#00A4EF", GradientType=1);
}

.btn-nav-secondary {
  color: #000;
  background-color: #f9f9f9;
}

.btn-nav-secondary:hover {
  color: #000;
  background-color: #f0f0f0;
}

.btn-primary {
  transition: all 0.3s;
  color: #ffffff;
  background-color: #06799b;
  border-color: #06799b;
  border-radius: 5rem;
  border-bottom-right-radius: 0px !important;
  font-weight: medium;
  font-size: 0.8rem;
  padding-top:0.6rem;
  padding-bottom:0.6rem;
}

.btn-primary:hover,
.btn-primary:active {
  background-color: #06698b;
  border-color: #06799b;
}

.btn-outline-primary {
  transition: all 0.3s;
  color: #000000;
  background-color: #ffffff;
  border-radius: 5rem;
  border-bottom-right-radius: 0px !important;
  border: solid 2px #000000;
  font-weight: medium;
  font-size: 0.8rem;
  padding-top:0.6rem;
  padding-bottom:0.6rem;
}

.btn-outline-primary:hover,
.btn-outline-primary:active {
  color: #000000;
  background-color: #f0f0f0;
  border-color: #333333;
}
/* ===== HEADINGS ===== */

h1, h2, h3, h4, h5, h6 {
  color: #025271;
}

h1 {
  font-weight: 700;
}

h2 {
  font-weight: semibold;
}

h3, h4 {
  font-weight: semibold;
}

h5, h6 {
  color: #172128;
  font-weight: normal;
  line-height: 1.7rem;
}

h2 > span {
  display:inline-block;
  height: auto;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  background: rgb(0,128,226);
  background: -moz-linear-gradient(90deg, rgba(0,128,226,1) 0%, rgba(72,201,255,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(0,128,226,1) 0%, rgba(72,201,255,1) 100%);
  background: linear-gradient(90deg, rgba(0,128,226,1) 0%, rgba(72,201,255,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0080e2",endColorstr="#48c9ff",GradientType=1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ===== BODY TEXT ===== */

p {
  
}

/* ===== NAVBAR ===== */

.navbar .navbar-brand > img,
.navbar > div > div,
body header {
  transition:all 0.3s
}

.mobile .nav-item,
.tablet .nav-item {
  margin-bottom:0.5rem;
}

body.scrolled .navbar .navbar-brand > img {
  max-width: 80%;
}

body.scrolled .navbar > div > div {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

body.mobile.scrolled header,
body.tablet.scrolled header {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

/* ===== PANELS ===== */

.panel {
  border-radius: 3rem;
  border-bottom-right-radius: 0px !important;
  padding: 2rem;
  height: 100%;
}

.panel-outline {
  border: solid 3px #f2f4f6;
}

#whychoose .panel .panel-icon {
  margin: 1rem auto;
  width: 5rem;
  height: 5rem;
  transition: all 0.3s;
}

#whychoose .panel .panel-heading {
  text-align:center;
  font-size: 1.2rem;
  font-weight: 700;
  color: #000000;
}

#whychoose .panel .panel-caption {
  text-align:center;
  color: #000000;
  transition: all 0.3s;
}

#comprehensiveqa .panel {
  padding: 2.5rem;
  background-color: #ffffff;
  transition: all 0.3s;
}

#comprehensiveqa .panel.panel-active {
  background-color: #f2f4f6;
}

#comprehensiveqa .panel .panel-toggle {
  width: 2rem;
  height: 2rem;
  opacity: 1;
  margin-left: auto;
  margin-bottom: 1rem;
  opacity:1;
  transition: all 0.3s;
}

#comprehensiveqa .panel.panel-active .panel-toggle {
  opacity:0;
}

#comprehensiveqa .panel .panel-heading {
  font-size: 1.6rem;
  font-weight: 700;
  padding-right: 2rem;
  color: #025271;
}

#comprehensiveqa .panel .panel-caption {
  color: #000000;
  padding-right: 1rem;
  padding-bottom:1rem;
  flex-grow:1;
  opacity:0;
  transition: all 0.3s;
}

#comprehensiveqa .panel.panel-active .panel-caption {
  opacity:1;
}

#comprehensiveqa .panel .panel-icon {
  width: 5rem;
  height: 5rem;
}

.panel-team-circle {
  background: #00B4FF;
  background: -webkit-linear-gradient(135deg, rgba(0, 180, 255, 1) 0%, rgba(0, 133, 235, 1) 100%);
  background: -moz-linear-gradient(135deg, rgba(0, 180, 255, 1) 0%, rgba(0, 133, 235, 1) 100%);
  background: linear-gradient(135deg, rgba(0, 180, 255, 1) 0%, rgba(0, 133, 235, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00B4FF", endColorstr="#0085EB", GradientType=0);
}

#leadership .section-bg {
  margin-top:-31.5rem;
}

#leadership .section-bg > img {
  width: 80%;
}

#leadership .panel {
  height: unset;
  background-color: #06799b;
  padding: 2rem 3rem;
}

#leadership .panel .panel-team-intro {
  font-weight: 100;
  color: #ffffff;
}

#leadership .panel-team-label .panel-team-info {
  border-left: solid 0.5rem #ea4a2f;
}

#leadership .panel-team-label .panel-team-info > .team-title {
  color: #000000;
  font-weight: 700;
}

#leadership .panel-team-label .panel-team-info > .team-position {
  color: #000000;
  font-size: 1.2rem;
}

#clienttestimonial .panel {
  background-color:#fcfcfc;
  padding: 3rem 3rem;;
}

#clienttestimonial .panel.panel-active {
  background-color: #f2f4f6;
}

#clienttestimonial .panel .panel-clientname {
  font-weight: 700;
  background: #0085EB;
  background: -webkit-linear-gradient(90deg, rgba(0, 133, 235, 1) 0%, rgba(0, 180, 255, 1) 100%);
  background: -moz-linear-gradient(90deg, rgba(0, 133, 235, 1) 0%, rgba(0, 180, 255, 1) 100%);
  background: linear-gradient(90deg, rgba(0, 133, 235, 1) 0%, rgba(0, 180, 255, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0085EB", endColorstr="#00B4FF", GradientType=1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#clienttestimonial .panel .panel-clientposition {
  opacity: 0.5;
}

#ourpurpose .panel .panel-icon {
  margin: 1rem auto;
  width: 5rem;
  height: 5rem;
  transition: all 0.3s;
}

#ourpurpose .panel .panel-heading {
  text-align:center;
  font-size: 1.2rem;
  font-weight: 700;
  color: #000000;
}

#ourpurpose .panel .panel-caption {
  text-align:center;
  A
  color: #000000;
  transition: all 0.3s;
}

#about-founder .section-bg > img {
  width: 80%;
}

#about-founder .panel {
  height: unset;
  background-color: #f2f4f6;
  padding: 3rem 3rem;
}

#about-founder .panel .panel-team-intro {
  color: #000000;
  font-size: 1.2rem;
}

#about-founder .panel-team-label .panel-team-info {
  border-left: solid 0.5rem #ea4a2f;
}

#about-founder .panel-team-label .panel-team-info > .team-title {
  color: #000000;
  font-weight: 700;
}

#about-founder .panel-team-label .panel-team-info > .team-position {
  color: #000000;
  font-size: 1.2rem;
}

#testingsolutions .panel {
  padding: 2.5rem;
  background-color: #ffffff;
  transition: all 0.3s;
}

#testingsolutions .panel .panel-heading {
  font-size: 1.6rem;
  font-weight: 700;
  padding-right: 2rem;
  color: #025271;
}

#testingsolutions .panel .panel-caption {
  color: #000000;
  padding-right: 1rem;
  padding-bottom:1rem;
  flex-grow:1;
  transition: all 0.3s;
  font-size: 1.2rem;
}

#testingsolutions .panel .panel-icon {
  width: 5rem;
  height: 5rem;
}

#verification .panel {
  background-color: #f2f4f6;
}

#verification .panel .panel-icon {
  margin: 1rem auto;
  width: 5rem;
  height: 5rem;
  transition: all 0.3s;
}

#verification .panel .panel-heading {
  text-align:center;
  font-size: 1.6rem;
  font-weight: 700;
  color: #000000;
}

#verification .panel .panel-caption {
  font-size: 1.2rem;
  text-align:center;
  color: #000000;
  transition: all 0.3s;
}

#schedulehighlights .panel .panel-icon {
  width: 80%;
  margin: 1rem auto;
  transition: all 0.3s;
}

#schedulehighlights .panel .panel-heading {
  font-size: 1.2rem;
  font-weight: 700;
  color: #000000;
}

#schedulehighlights .panel .panel-caption {
  font-size: 1rem;
  color: #000000;
  transition: all 0.3s;
}

#workshops .panel {
  background-color: #f2f4f6;
}

#workshops .panel .panel-icon {
  width: 4rem;
  margin: 1rem 0;
  transition: all 0.3s;
}

#workshops .panel .panel-heading {
  font-size: 1.2rem;
  font-weight: 700;
  color: #000000;
}

#workshops .panel .panel-caption {
  font-size: 1rem;
  color: #000000;
  transition: all 0.3s;
}

/*
.panel-block {
  padding: 2rem;
  border-radius: 2rem;
  border: solid 3px #eee;
  position:relative;
}

.panel-corner-1 {
  border-bottom-right-radius: 0px !important;
}

.panel-corner-2 {
  border-bottom-left-radius: 0px !important;
}

.panel-corner-3 {
  border-top-right-radius: 0px !important;
}

.panel-corner-4 {
  border-top-left-radius: 0px !important;
}

.panel-icon {
  margin-top: 1.5rem;
  max-height: 3rem;
}

.panel-services {
  background: linear-gradient(white, white) padding-box,
              linear-gradient(to right, rgba(0,128,226,1), rgba(72,201,255,1)) border-box;
  border-radius: 2rem;
  border: 3px solid transparent;
}

.panel-services > .panel-bullet {
  position:relative;
  padding-left: 2rem;
  padding-right: 4rem;
  margin-top: 1rem;
}

.panel-services > .panel-bullet:before {
  position:absolute;
  content: '';
  display:block;
  width: 0.8rem;
  height: 0.8rem;
  top: 0.4rem;
  left: 0.5rem;
  background: transparent url('../img/icon-bullet.png') top left no-repeat;
  background-size: contain;
}

.panel-services > .panel-icon {
  position:absolute;
  bottom: 2rem;
  right: 2rem;
}
*/

/* ===== TIMELINE CODE ===== */

    .timeline-wrapper {
      display: flex;
      overflow: hidden;
    }

    .timeline-panel {
      flex: 1;
      transition: flex 0.5s ease;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      border: solid 1px red;
    }

    .timeline-panel.active {
      flex: 5;
      cursor: default;
    }

    .timeline-panel .year-label {
      position: absolute;
      top: 3rem;
      font-size: 2rem;
      left: 50%;
      transform: translateX(-50%) rotateZ(180deg);
      font-weight: 500;
      color: #025271;
      font-style:italic;
      writing-mode: vertical-lr;
      text-align: center;
      white-space: nowrap;
    }

    .timeline-panel .content {
      opacity: 0;
      padding: 2rem;
      transition: opacity 0.4s ease;
      pointer-events: none;
      border-radius: 3rem;
      border-bottom-right-radius: 0px !important;
    }

    .timeline-panel .content .year-title {
      font-weight: 700;
      font-style: italic;
      background: #0085EB;
      background: -webkit-linear-gradient(90deg, rgba(0, 133, 235, 1) 0%, rgba(0, 180, 255, 1) 100%);
      background: -moz-linear-gradient(90deg, rgba(0, 133, 235, 1) 0%, rgba(0, 180, 255, 1) 100%);
      background: linear-gradient(90deg, rgba(0, 133, 235, 1) 0%, rgba(0, 180, 255, 1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0085EB", endColorstr="#00B4FF", GradientType=1);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .timeline-panel.active .content {
      opacity: 1;
      pointer-events: auto;
    }

    .timeline-panel:not(.active):hover {
      background-color: #e9ecef;
    }

/* ===== FOOTER ===== */
footer {
  background-color: #1c1c1c;
  color: #858585;
}