* {
  margin: 0;
  padding: 0;
  font-family: 'Agency FB', sans-serif;
  text-decoration: none;
}

html {
  font-size: 10px;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 0.45fr;
  grid-template-rows: 0.3fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "header header header nav"
    "content content content nav"
    "content content content nav";
  height: 100vh;
  width: 100vw;
  background-color: #ffffff;
}

.header {
  grid-area: header;
  background-color: #00BBFF;


}

.nav {
  grid-area: nav;
  background-color: #1d2023;
}

.container-hrl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "header-left header-right";
  justify-content: left;
  align-items: center;
  position: relative;
  height: 100%;
}

.header-left {
  grid-area: header-left;
}

.header-right {
  grid-area: header-right;
}

body {
  margin: 0;
}

.sidenav a {
  font-size: 2vw;
  display: block;
  text-decoration: none;
  color: #ffffff;
  font-family: 'Agency FB', sans-serif;
  margin: 7.95%;
  text-align: center;
}

.sidenav a[href="technowire-sv.html"] {
  color: #00BBFF;
}

.sidenav a:hover {
  color: #00DAFF;
}

#tw-tplg {
  width: 35%;
  height: auto;
  padding-left: 2%;

}

.clr-accent {
  color: #00BBFF;
}

.content {
  grid-area: content;
  overflow-y: scroll;

}

.content::-webkit-scrollbar {
  display: none;
}

.container-content {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 0.2fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "intro intro intro"
    "timeline-content timeline-content timeline-content";
  height: 100%;
}

.intro {
  grid-area: intro;
  font-size: 1.9rem;
  margin-bottom: 3.5%;
}

.intro-p {
  color: #000000;
  width: 90%;
  padding-left: 1rem;
  /* padding-top: 1rem; */
}

.intro-h1 {
  font-size: 6.5rem;
  padding-left: 1rem;
  padding-top: 1rem;
}

.menu {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu>li {
  margin: 0.5em 0;
  overflow: hidden;

}

.menu-button-container {
  display: none;
  height: 100%;
  width: 100%;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}

#menu-toggle {
  display: none;
}

.menu-button,
.menu-button::before,
.menu-button::after {
  display: block;
  background-color: #ffffff;
  position: absolute;
  height: 0.4rem;
  width: 3rem;
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 0.2rem;

}

.menu-button::before {
  content: '';
  margin-top: -8px;
}

.menu-button::after {
  content: '';
  margin-top: 8px;
}

#menu-toggle:checked+.menu-button-container .menu-button::before {
  margin-top: 0px;
  transform: rotate(405deg);
}

#menu-toggle:checked+.menu-button-container .menu-button {
  background: rgba(255, 255, 255, 0);
}

#menu-toggle:checked+.menu-button-container .menu-button::after {
  margin-top: 0px;
  transform: rotate(-405deg);
}

li {
  display: none;
}

.steps {
  position: relative;
  margin: 2%;
}

.steps::after {
  content: "";
  position: absolute;
  width: 0.4rem;
  background-color: #000000;
  top: 0;
  bottom: 0;
  left: 50%;
}

.steps .content-tl .timeline-p {
  color: #ffffff;
  font-size: 1.9rem;
}

.steps .content-tl .timeline-t {
  font-weight: 600;
  font-size: 2.8rem;
  color: #00BBFF;
}

.steps-container {
  position: relative;
  background-color: inherit;
  width: calc(50% + 3.1rem);
}

.steps-container .content-tl {
  padding: 1.5rem;
  background-color: #1d2023;
  position: relative;
  border-radius: 0.7rem;
  margin-bottom: 3%;
}

.steps .steps-container:nth-child(even) {
  left: calc(50% - 3.1rem);
  flex-direction: row-reverse;
}

.steps-container {
  display: flex;
}

.steps .steps-container .date {
  font-weight: 900;
  font-size: 1.9rem;
  color: #ffffff;
  margin-bottom: 10px;
  width: 62px;
  height: 62px;
  background-color: #1d2023;
  flex-shrink: 0;
  align-items: center;
  display: flex;
  justify-content: center;
  z-index: 777;
  border-radius: 0.7rem;
}

.step-line {
  width: 40px;
  background-color: #000000;
  height: 0.4rem;
  margin-top: 31px;
  flex-shrink: 0;
}

.timeline-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#t-logo {
  width: 40%;
  margin: 4% 4% 0 4%;
  border-radius: 0.7rem;
}

.timeline-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 768px) {


  .container {
    display: grid;
    width: 100vw;
    height: 100vh;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 0.3fr 1fr 1fr;
    gap: 0rem 0rem;
    grid-auto-flow: row;
    overflow-x: hidden;
    grid-template-areas:
      "header header header"
      "content content content"
      "content content content";
  }

  .container-hrl {
    width: 100vw;
  }

  .nav {
    display: none;
  }

  .header {
    width: 100vw;
  }

  .menu-button-container {
    float: right;
    margin-right: 5%;
    justify-self: center;
  }

  #tw-tplg {
    width: 18rem;
    margin: 5% 0;
  }

  .menu-button-container {
    display: flex;
  }

  .menu {
    position: absolute;
    top: 100%;
    right: 0;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
  }

  #menu-toggle~.menu li {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  #menu-toggle:checked~.menu li {
    height: 2.5em;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  .menu>li {
    display: flex;
    justify-content: center;
    width: 100%;
    color: #00BBFF;
    background-color: #1d2023;
    font-size: 2rem;
    text-decoration: none;
    align-items: center;
    z-index: 778;
  }

  .menu a {
    width: 100%;
    text-align: center;
}

  a {
    color: #ffffff
  }

  .menu a[href="technowire-sv.html"] {
    color: #00BBFF;
  }

  .container-content {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 0.2fr 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "intro intro intro"
      "timeline-content-mb timeline-content-mb timeline-content-mb";
    height: 100%;
  }


  .intro {
    padding: 0;
    margin: 0;
    /* text-align: center; */
}

.container-tl {
  margin-top: 3%;
}

.intro-h1 {
    font-size: 4rem;
    padding: 0;
    margin: 0 2%;
    margin-top: 2%;
    /* text-align: center; */
}

.intro-p {
    font-size: 1.9rem;
    /* text-align: center; */
    width: 96%; 
    padding: 0;
    margin: 0 2%;
}

  .steps::after {
    left: 32px;
  }

  .steps-container {
    left: 0;
    flex-direction: row-reverse;
    width: auto;
    margin-bottom: 16px;
  }

  .steps .steps-container:nth-child(even) {
    left: 0;
  }

  #t-logo {
    width: 50%;
    margin: 4% 4% 0 4%;
  }

  .timeline-content {
    margin-top: 8%;
  }

}