:root {
  --dark-blue: #162931;
  --gold: #cc9b51;
}

.tn-container {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
}

/*.tn-container.full-line:before,*/
/*.tn-container.full-line:after {*/
/*  content: "";*/
/*  height: 1px;*/
/*  background: white;*/
/*  width: calc(50% - 425px);*/
/*  position: absolute;*/
/*  bottom: 31.5px;*/
/*}*/

/*.tn-container.full-line:before {*/
/*  left: 120px;*/
/*}*/

/*.tn-container.full-line:after {*/
/*  right: 120px;*/
/*}*/

/*.tn-container.full-line.navy-line:before,*/
/*.tn-container.full-line.navy-line:after {*/
/*  background: var(--dark-blue);*/
/*}*/

/*.tn-container.full-line.gold-line:before,*/
/*.tn-container.full-line.gold-line:after {*/
/*  background: var(--gold);*/
/*}*/

/* Nav Items */
.tn-nav-items {
  width: 100%;
  max-width: 800px;
  display: flex;
  margin: auto;
  padding: 0 74px;
  overflow: hidden;
}

.tn-nav-items .tn-bullet {
  flex-grow: 1;
  /*color: #fff;*/
  color: inherit;
  text-align: center;
  font-size: 18px;
  font-family: "gravesend-sans", sans-serif;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  text-transform: uppercase;
}

.tn-nav-items .tn-bullet-btn {
  & a,
  button {
    color: inherit;
  }
}

.tn-nav-items .tn-bullet-btn {
  cursor: pointer;
}

/* Large Title */
.tn-nav-items .tn-bullet-title {
  position: relative;
  font-size: 48px;
  letter-spacing: 2.4px;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: 0.5s ease-out;
  /*transform: translateX(-25%);*/
  width: max-content;
  margin: auto;
}

.tn-nav-items .tn-bullet-title {
  & a,
  button {
    /*color: #fff;*/
    color: inherit;
    transition: 0.5s ease-in-out;
    background: none;
    border: none;
    font-size: inherit;
    font-weight: inherit;
    cursor: pointer;
  }
}

.tn-nav-items .tn-bullet-title {
  & a svg,
  button svg {
    opacity: 0;
    visibility: hidden;
    transition: 0.5s ease-in-out;
  }
}

.tn-nav-items .tn-bullet-title {
  & a:hover svg,
  button:hover svg {
    opacity: 1;
    visibility: visible;
  }
}

@media (max-width: 900px) {
  .tn-nav-items .btn-bullet-title {
    font-size: 25px;
  }
}

/* .tn-nav-items .tn-bullet:nth-of-type(5) .tn-bullet-title {
  transform: translateX(-55%);
} */

/*.tn-nav-items .tn-bullet:last-of-type .tn-bullet-title {*/
  /* transform: translateX(-200%); */
/*  transform: translateX(-70%);*/
/*}*/

/*@media (max-width: 1020px) {
 .tn-nav-items .tn-bullet:last-of-type .tn-bullet-title {
  transform: translateX(-70%);
 }
}*/

.tn-nav-items .tn-bullet:nth-of-type(1) .tn-bullet-title {
  transform: none;
}

.tn-nav-items .tn-bullet-title span {
  display: flex;
  align-items: center;
}

.tn-nav-items .tn-bullet-title svg {
  margin-top: 15px;
}

.tn-nav-items .tn-bullet .tn-bullet-text {
  transition: 0.5s ease-in-out;
}

.tn-nav-items .tn-bullet-text {
  & a,
  button {
    /*color: #fff;*/
    color: inherit;
    transition: 0.5s ease-in-out;
    background: none;
    border: none;
    font-size: inherit;
    font-weight: inherit;
    padding: 0;
    cursor: pointer;
  }
}

/* Diamond Icon */
.tn-nav-items .tn-icon {
  display: grid;
  grid-template: 1fr / 1fr;
  position: relative;
  align-items: center;
}

.tn-nav-items .tn-icon:after,
.tn-nav-items .tn-icon:before {
  position: absolute;
  content: "";
  width: calc(50% - 8px);
  height: 1px;
  background: #fff;
}

.tn-nav-items .tn-icon:before {
  left: 0;
}

.tn-nav-items .tn-icon:after {
  right: 0;
}

.tn-container.navy-line .tn-nav-items .tn-icon:after,
.tn-container.navy-line .tn-nav-items .tn-icon:before {
  background: var(--dark-blue);
}

.tn-container.gold-line .tn-nav-items .tn-icon:after,
.tn-container.gold-line .tn-nav-items .tn-icon:before {
  background: var(--gold);
}

.tn-nav-items .tn-icon > * {
  /*  grid-column: 1;*/
  /*  grid-row: 1;*/
  margin: auto;
  /*  position: relative;*/
  /*  transition: opacity 0.5s ease-in-out;*/
}

.tn-nav-items .tn-icon svg path {
  transition: 0.5s ease-in-out;
  fill: #fff;
}

.tn-container.navy-line .tn-nav-items .tn-icon svg path {
  transition: 0.5s ease-in-out;
  fill: var(--dark-blue);
}

.tn-container.gold-line .tn-nav-items .tn-icon svg path {
  transition: 0.5s ease-in-out;
  fill: var(--gold);
}

/* Active State */
.tn-nav-items .tn-bullet.active .tn-bullet-title {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  transition: 1s ease-in;
}

.tn-nav-items .tn-bullet.active .tn-icon img {
  opacity: 0;
  visibility: hidden;
  z-index: 0;
}

.tn-nav-items .tn-bullet.active .tn-icon .active-icon {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

.tn-nav-items .tn-bullet.active .tn-icon svg path {
  transition: 0.5s ease-in-out;
  fill: none;
  stroke: #fff;
}

.tn-nav-items .tn-bullet.active .tn-bullet-text {
  opacity: 0;
}

.tn-container.navy-line .tn-nav-items .tn-bullet.active .tn-icon svg path {
  transition: 0.5s ease-in-out;
  fill: none;
  stroke: var(--dark-blue);
}

.tn-container.gold-line .tn-nav-items .tn-bullet.active .tn-icon svg path {
  transition: 0.5s ease-in-out;
  fill: none;
  stroke: var(--gold);
}

/* Tab Styles*/
.tab-content {
  /* Couldn't use these styles, because the tabs are all seperate Divi sections, so there isn't a parent/child relationship
   opacity: 0;
  visibility: hidden;
  transition: 0.5s ease-in-out;
  position: absolute;
  top: 0;
  z-index: 0; */
  display: none;
}

.tab-content.active {
  /* opacity: 1;
  visibility: visible;
  z-index: 1; */
  display: block;
}

@media (max-width: 700px) {
    .tn-nav-items {
        padding: 0 20px;
    }
    .tn-nav-items .tn-bullet {
        font-size: 14px;
    }
    .tn-nav-items .tn-bullet-title {
        font-size: 25px;
    }
}