/* Base */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, helvetica, 'helvetica neue', ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;
  margin: 0;
}

a {
  color: #1E88E5;
}

/* Extracted Tachyons Utilities */
.tc { text-align: center; }
.pv4 { padding-top: 2rem; padding-bottom: 2rem; }
.f-headline { font-size: 6rem; }
.lh-solid { line-height: 1; }
.f2 { font-size: 2.25rem; }
.mt5 { margin-top: 4rem; }
.mb4 { margin-bottom: 2rem; }
.dib { display: inline-block; }
.v-mid { vertical-align: middle; }
.mr3 { margin-right: 1rem; }
.pa2 { padding: 0.5rem; }
.pt4 { padding-top: 2rem; }
.pb3 { padding-bottom: 1rem; }
.pb2 { padding-bottom: 0.5rem; }
.b { font-weight: bold; }
.black-70 { color: rgba(0, 0, 0, 0.7); }
.mw8 { max-width: 64rem; }

/* Primary Button */
.primary-button {
  display: inline-block;
  color: #333;
  padding: 0.7rem 1rem;
  margin: 0 2rem;
  background: #FFD54F;
  border: solid 3px #FFD54F;
  font-size: 1rem;
  text-decoration: none;
  min-width: 120px;
}

.primary-button:hover {
  background: #fff;
}

/* Hero Cover */
.index-page .cover {
  background: #152652;
  background-size: 100% auto;
}

.index-page .cover h1 {
  color: #fafafa;
  margin-top: 5rem;
}

.index-page .cover h2 {
  color: #fcfcfc;
  margin-top: 6rem;
}

.index-page nav {
  margin-top: 3rem;
}

.index-page .scroll-arrow {
  margin-top: 4rem;
}

/* Sections */
section {
  padding: 3rem 0;
  background: #f8f8f8;
}

section.blue-section { background: #E3F2FD; }
section.lime-section { background: #F9FBE7; }

section h1 {
  color: #455A64;
}

.section__wrapper {
  margin: 0 auto;
  padding: 0 1rem;
}

/* About */
.about .who-wrapper {
  display: flex;
  align-items: center;
}

.about .what-is {
  flex: 1 1 auto;
}

.about .profile-photo {
  border-radius: 50%;
  width: 80px;
  height: 80px;
  display: inline-block;
}

.about .clients img {
  max-height: 50px;
  padding: 1.5rem;
}

.about .tags {
  padding: 1rem 0 0 0;
}

/* Tags */
.tag {
  display: inline-block;
  margin-bottom: 0.3rem;
  margin-right: 0.5rem;
  background: #efefef;
  color: #555;
  font-size: 0.8rem;
  border-radius: 0.8rem;
  padding: 0.3rem 0.5rem;
}

/* Scroll Arrow */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.scroll-arrow {
  width: 100%;
}

.scroll-arrow .arrow {
  width: 32px;
  display: block;
  height: 32px;
  background: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDI4NC45MjkgMjg0LjkyOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjg0LjkyOSAyODQuOTI5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTI4Mi4wODIsNzYuNTExbC0xNC4yNzQtMTQuMjczYy0xLjkwMi0xLjkwNi00LjA5My0yLjg1Ni02LjU3LTIuODU2Yy0yLjQ3MSwwLTQuNjYxLDAuOTUtNi41NjMsMi44NTZMMTQyLjQ2NiwxNzQuNDQxICAgTDMwLjI2Miw2Mi4yNDFjLTEuOTAzLTEuOTA2LTQuMDkzLTIuODU2LTYuNTY3LTIuODU2Yy0yLjQ3NSwwLTQuNjY1LDAuOTUtNi41NjcsMi44NTZMMi44NTYsNzYuNTE1QzAuOTUsNzguNDE3LDAsODAuNjA3LDAsODMuMDgyICAgYzAsMi40NzMsMC45NTMsNC42NjMsMi44NTYsNi41NjVsMTMzLjA0MywxMzMuMDQ2YzEuOTAyLDEuOTAzLDQuMDkzLDIuODU0LDYuNTY3LDIuODU0czQuNjYxLTAuOTUxLDYuNTYyLTIuODU0TDI4Mi4wODIsODkuNjQ3ICAgYzEuOTAyLTEuOTAzLDIuODQ3LTQuMDkzLDIuODQ3LTYuNTY1QzI4NC45MjksODAuNjA3LDI4My45ODQsNzguNDE3LDI4Mi4wODIsNzYuNTExeiIgZmlsbD0iI0ZGREE0NCIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjBnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=) no-repeat;
  margin-left: 6px;
  margin-top: 10px;
}

.scroll-arrow .btn-circle {
  display: block;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  transition: background 0.4s ease-in-out;
  margin: 0 auto;
  padding-top: 1px;
}

.scroll-arrow .btn-circle .animated {
  transition-property: transform;
  transition-duration: 1s;
  animation-name: pulse;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.scroll-arrow .btn-circle:hover,
.scroll-arrow .btn-circle:focus {
  background: rgba(255, 255, 255, 0.3);
}