/* index */
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vh - var(--header-height));
}
.logo-container {
  will-change: transform;
}
.logo img {
  width: 353px;
  max-width: 100%;
}
.scrollarrow {
  position: absolute;
  bottom: calc(var(--header-height) / 2);
  left: calc(50% - 10px);
  height: 20px;
  width: 20px;
  transform: rotate(45deg);
  border: 1px solid black;
  border-top: none;
  border-left: none;
  transition: opacity .5s;
}

.who {
  text-align: center;
  width: 697px;
  margin: auto;
}
@media only screen and (max-width: 768px) {
  .who {
    width: 100%;
  }
}

.us {
  width: 728px;
  display: flex;
  justify-content: space-between;
  margin: auto;
  margin-top: var(--section-gutter);
  margin-bottom: var(--section-gutter);
}
.us .one {
  font-size: 16px;
  text-align: left;
  flex: 0 0 45%;
}
.us .one .shot {
  text-align: center;
  border-radius: 50%;
  width: 132px;
  height: 132px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  position: relative;
  background-size: cover;
}
.us .one .shot.him {
  background-image: url("../him.png");
}
.us .one .shot.her {
  background-image: url("../her.png");
}
.us .one .shot .overlay {
  position: absolute;
  height: 100%;
  width: 100%;
}
.him .overlay {
  background-color: var(--blue);
}
.her .overlay {
  background-color: var(--red);
}
@media only screen and (max-width: 768px) {
  .us {
    flex-direction: column-reverse;
    width: 100%;
  }
  .us .linkedin img {
    width: 30px;
  }
  .us .one .shot.him {
    margin-top: var(--section-gutter);
  }
}

.capabilities {
  margin: var(--section-gutter) 0;
}
.capabilities .skills {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  text-align: center;
}
.capabilities .skill {
  transform: translateY(20px);
  opacity: 0;
  transition: all 1s;
}
.capabilities .skill img {
  width: 48px;
}
@media only screen and (max-width: 768px) {
  .capabilities {
    margin: var(--section-gutter) 0 0;
  }
  .capabilities .skills {
    flex-wrap: wrap;
    padding: calc(var(--section-gutter) / 2) 0;
  }
  .capabilities .skills .skill {
    flex-basis: 50%;
    margin-bottom: 50px;
  }
}

.testimonials {
  position: relative;
  background-color: var(--darkGrey);
  color: var(--white);
  padding-top: var(--header-height);
  padding-bottom: var(--header-height);
  font-size: 18px;
  font-weight: 500;
}
.testimonials .name {
  font-family: var(--sans-serif);
  text-align: right;
}
.testimonials .title {
  font-style: italic;
  text-align: right;
}
.dots {
  display: flex;
  position: absolute;
  bottom: 20px;
  width: 100%;
  align-items: center;
  justify-content: center;
}
.dots .dot {
  cursor: pointer;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: white;
}
.dot:not(:last-child) {
  margin-right: 10px;
}
.dots .dot.active {
  background-color: var(--gold);
}

.contact {
  transform: translateY(20px);
  opacity: 0;
  transition: all 1s;
  margin-top: var(--header-height);
  margin-bottom: var(--header-height);
}
.contact a {
  text-decoration: none;
}

@media only screen and (max-width: 768px) {
  .contact {
    width: 100%;
  }
}