/***
    The new CSS reset - version 1.5.1 (last updated 1.3.2022)
    GitHub page: https://github.com/elad2412/the-new-css-reset
***/
/*
    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
    - The "symbol *" part is to solve Firefox SVG sprite bug
 */
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,300&display=swap");
*:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)) {
  all: unset;
  display: revert;
}

/* Preferred box-sizing value */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Reapply the pointer cursor for anchor tags */
a, button {
  cursor: revert;
}

/* Remove list styles (bullets/numbers) */
ol, ul, menu {
  list-style: none;
}

/* For images to not be able to exceed their container */
img {
  max-width: 100%;
}

/* removes spacing between cells in tables */
table {
  border-collapse: collapse;
}

/* revert the 'white-space' property for textarea elements on Safari */
textarea {
  white-space: revert;
}

/* minimum style to allow to style meter element */
meter {
  -webkit-appearance: revert;
  -moz-appearance: revert;
       appearance: revert;
}

/* reset default text opacity of input placeholder */
::-moz-placeholder {
  color: unset;
}
:-ms-input-placeholder {
  color: unset;
}
::placeholder {
  color: unset;
}

/* fix the feature of 'hidden' attribute.
   display:revert; revert to element instead of attribute */
:where([hidden]) {
  display: none;
}

/* revert for bug in Chromium browsers
   - fix for the content editable attribute will work properly. */
:where([contenteditable]) {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
}

/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {
  -webkit-user-drag: element;
}

body {
  font-family: "Oxygen", sans-serif;
  color: #282828;
}

.uni-module-title {
  margin: 26px 0 42px 0;
}

h1 {
  font-size: 1.8em;
  font-weight: 300;
  margin: 0.35em 0;
}
@media only screen and (min-width: 48em) {
  h1 {
    font-size: 2em;
  }
}
@media only screen and (min-width: 62em) {
  h1 {
    font-size: 2.2em;
  }
}

h2 {
  font-size: 1.4em;
  font-weight: 300;
  margin: 0;
}
@media only screen and (min-width: 48em) {
  h2 {
    font-size: 1.7em;
  }
}
@media only screen and (min-width: 62em) {
  h2 {
    font-size: 2em;
  }
}

h3 {
  font-size: 1.2em;
  font-weight: 300;
  margin: 0;
}
@media only screen and (min-width: 48em) {
  h3 {
    font-size: 1.4em;
  }
}
@media only screen and (min-width: 62em) {
  h3 {
    font-size: 1.6em;
  }
}

.bold-text {
  font-weight: 600;
}

.italic-text {
  font-style: italic;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.text2 {
  font-size: 1.2em;
}

.text3 {
  font-size: 1.6em;
}

.container-wrap {
  max-width: 1200px;
  margin: 0 auto;
}

.flexgrid {
  width: 100%;
  padding: 8px 0;
  margin: 0 auto;
}
.flexgrid.constrain {
  max-width: 1200px;
}
.flexgrid.no-gutter {
  padding: 0;
}
.flexgrid .row {
  display: flex;
  flex: 0 1 auto;
  flex-flow: row wrap;
  width: calc(100% - (16px));
  margin: 0 8px;
}
.flexgrid .row.center {
  justify-content: center;
}
.flexgrid .row.between {
  justify-content: space-between;
}
.flexgrid .row.around {
  justify-content: space-around;
}
.flexgrid .row.left {
  justify-content: flex-start;
}
.flexgrid .row.right {
  justify-content: flex-end;
}
.flexgrid .row.reverse {
  flex-flow: row wrap-reverse;
}
.flexgrid .row [class^=col-] {
  margin: 8px;
}
.flexgrid .row [class^=col-].vhcenter {
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
}
.flexgrid .row [class^=col-].top {
  display: flex;
  align-items: flex-start;
}
.flexgrid .row [class^=col-].vcenter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.flexgrid .row [class^=col-].center {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.flexgrid .row [class^=col-].between {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.flexgrid .row [class^=col-].around {
  display: flex;
  justify-content: space-around;
}
.flexgrid .row [class^=col-].left {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.flexgrid .row [class^=col-].right {
  justify-content: flex-end;
  flex-wrap: wrap;
}
.flexgrid .row [class^=col-].reverse {
  display: flex;
  flex-flow: row wrap-reverse;
  flex-wrap: wrap;
}
.flexgrid .row .col-1 {
  flex: 0 0 calc((1 / 6 * 100%) - (16px));
}
.flexgrid .row .max-1 {
  max-width: 198.67px;
}
.flexgrid .row .col-2 {
  flex: 0 0 calc((2 / 6 * 100%) - (16px));
}
.flexgrid .row .max-2 {
  max-width: 397.33px;
}
.flexgrid .row .col-3 {
  flex: 0 0 calc((3 / 6 * 100%) - (16px));
}
.flexgrid .row .max-3 {
  max-width: 596px;
}
.flexgrid .row .col-4 {
  flex: 0 0 calc((4 / 6 * 100%) - (16px));
}
.flexgrid .row .max-4 {
  max-width: 794.67px;
}
.flexgrid .row .col-5 {
  flex: 0 0 calc((5 / 6 * 100%) - (16px));
}
.flexgrid .row .max-5 {
  max-width: 993.33px;
}
.flexgrid .row .col-6 {
  flex: 0 0 calc((6 / 6 * 100%) - (16px));
}
.flexgrid .row .max-6 {
  max-width: 1192px;
}
@media only screen and (min-width: 20em) {
  .flexgrid .row .col-1-xs {
    flex: 0 0 calc((1 / 6 * 100%) - (16px));
  }
  .flexgrid .row .col-2-xs {
    flex: 0 0 calc((2 / 6 * 100%) - (16px));
  }
  .flexgrid .row .col-3-xs {
    flex: 0 0 calc((3 / 6 * 100%) - (16px));
  }
  .flexgrid .row .col-4-xs {
    flex: 0 0 calc((4 / 6 * 100%) - (16px));
  }
  .flexgrid .row .col-5-xs {
    flex: 0 0 calc((5 / 6 * 100%) - (16px));
  }
  .flexgrid .row .col-6-xs {
    flex: 0 0 calc((6 / 6 * 100%) - (16px));
  }
}
@media only screen and (min-width: 30em) {
  .flexgrid .row .col-1-s {
    flex: 0 0 calc((1 / 6 * 100%) - (16px));
  }
  .flexgrid .row .col-2-s {
    flex: 0 0 calc((2 / 6 * 100%) - (16px));
  }
  .flexgrid .row .col-3-s {
    flex: 0 0 calc((3 / 6 * 100%) - (16px));
  }
  .flexgrid .row .col-4-s {
    flex: 0 0 calc((4 / 6 * 100%) - (16px));
  }
  .flexgrid .row .col-5-s {
    flex: 0 0 calc((5 / 6 * 100%) - (16px));
  }
  .flexgrid .row .col-6-s {
    flex: 0 0 calc((6 / 6 * 100%) - (16px));
  }
}
@media only screen and (min-width: 48em) {
  .flexgrid .row .col-1-m {
    flex: 0 0 calc((1 / 6 * 100%) - (16px));
  }
  .flexgrid .row .col-2-m {
    flex: 0 0 calc((2 / 6 * 100%) - (16px));
  }
  .flexgrid .row .col-3-m {
    flex: 0 0 calc((3 / 6 * 100%) - (16px));
  }
  .flexgrid .row .col-4-m {
    flex: 0 0 calc((4 / 6 * 100%) - (16px));
  }
  .flexgrid .row .col-5-m {
    flex: 0 0 calc((5 / 6 * 100%) - (16px));
  }
  .flexgrid .row .col-6-m {
    flex: 0 0 calc((6 / 6 * 100%) - (16px));
  }
}
@media only screen and (min-width: 62em) {
  .flexgrid .row .col-1-l {
    flex: 0 0 calc((1 / 6 * 100%) - (16px));
  }
  .flexgrid .row .col-2-l {
    flex: 0 0 calc((2 / 6 * 100%) - (16px));
  }
  .flexgrid .row .col-3-l {
    flex: 0 0 calc((3 / 6 * 100%) - (16px));
  }
  .flexgrid .row .col-4-l {
    flex: 0 0 calc((4 / 6 * 100%) - (16px));
  }
  .flexgrid .row .col-5-l {
    flex: 0 0 calc((5 / 6 * 100%) - (16px));
  }
  .flexgrid .row .col-6-l {
    flex: 0 0 calc((6 / 6 * 100%) - (16px));
  }
}
@media only screen and (min-width: 75em) {
  .flexgrid .row .col-1-xl {
    flex: 0 0 calc((1 / 6 * 100%) - (16px));
  }
  .flexgrid .row .col-2-xl {
    flex: 0 0 calc((2 / 6 * 100%) - (16px));
  }
  .flexgrid .row .col-3-xl {
    flex: 0 0 calc((3 / 6 * 100%) - (16px));
  }
  .flexgrid .row .col-4-xl {
    flex: 0 0 calc((4 / 6 * 100%) - (16px));
  }
  .flexgrid .row .col-5-xl {
    flex: 0 0 calc((5 / 6 * 100%) - (16px));
  }
  .flexgrid .row .col-6-xl {
    flex: 0 0 calc((6 / 6 * 100%) - (16px));
  }
}
.flexgrid .row.no-gutter {
  width: 100%;
  margin: 0;
  padding: 0;
}
.flexgrid .row.no-gutter [class^=col-] {
  margin: 0;
}
.flexgrid .row.no-gutter .col-1 {
  flex: 0 0 16.67%;
}
.flexgrid .row.no-gutter .col-2 {
  flex: 0 0 33.33%;
}
.flexgrid .row.no-gutter .col-3 {
  flex: 0 0 50%;
}
.flexgrid .row.no-gutter .col-4 {
  flex: 0 0 66.67%;
}
.flexgrid .row.no-gutter .col-5 {
  flex: 0 0 83.33%;
}
.flexgrid .row.no-gutter .col-6 {
  flex: 0 0 100%;
}
@media only screen and (min-width: 20em) {
  .flexgrid .row.no-gutter .col-1-xs {
    flex: 0 0 16.67%;
  }
  .flexgrid .row.no-gutter .col-2-xs {
    flex: 0 0 33.33%;
  }
  .flexgrid .row.no-gutter .col-3-xs {
    flex: 0 0 50%;
  }
  .flexgrid .row.no-gutter .col-4-xs {
    flex: 0 0 66.67%;
  }
  .flexgrid .row.no-gutter .col-5-xs {
    flex: 0 0 83.33%;
  }
  .flexgrid .row.no-gutter .col-6-xs {
    flex: 0 0 100%;
  }
}
@media only screen and (min-width: 30em) {
  .flexgrid .row.no-gutter .col-1-s {
    flex: 0 0 16.67%;
  }
  .flexgrid .row.no-gutter .col-2-s {
    flex: 0 0 33.33%;
  }
  .flexgrid .row.no-gutter .col-3-s {
    flex: 0 0 50%;
  }
  .flexgrid .row.no-gutter .col-4-s {
    flex: 0 0 66.67%;
  }
  .flexgrid .row.no-gutter .col-5-s {
    flex: 0 0 83.33%;
  }
  .flexgrid .row.no-gutter .col-6-s {
    flex: 0 0 100%;
  }
}
@media only screen and (min-width: 48em) {
  .flexgrid .row.no-gutter .col-1-m {
    flex: 0 0 16.67%;
  }
  .flexgrid .row.no-gutter .col-2-m {
    flex: 0 0 33.33%;
  }
  .flexgrid .row.no-gutter .col-3-m {
    flex: 0 0 50%;
  }
  .flexgrid .row.no-gutter .col-4-m {
    flex: 0 0 66.67%;
  }
  .flexgrid .row.no-gutter .col-5-m {
    flex: 0 0 83.33%;
  }
  .flexgrid .row.no-gutter .col-6-m {
    flex: 0 0 100%;
  }
}
@media only screen and (min-width: 62em) {
  .flexgrid .row.no-gutter .col-1-l {
    flex: 0 0 16.67%;
  }
  .flexgrid .row.no-gutter .col-2-l {
    flex: 0 0 33.33%;
  }
  .flexgrid .row.no-gutter .col-3-l {
    flex: 0 0 50%;
  }
  .flexgrid .row.no-gutter .col-4-l {
    flex: 0 0 66.67%;
  }
  .flexgrid .row.no-gutter .col-5-l {
    flex: 0 0 83.33%;
  }
  .flexgrid .row.no-gutter .col-6-l {
    flex: 0 0 100%;
  }
}
@media only screen and (min-width: 75em) {
  .flexgrid .row.no-gutter .col-1-xl {
    flex: 0 0 16.67%;
  }
  .flexgrid .row.no-gutter .col-2-xl {
    flex: 0 0 33.33%;
  }
  .flexgrid .row.no-gutter .col-3-xl {
    flex: 0 0 50%;
  }
  .flexgrid .row.no-gutter .col-4-xl {
    flex: 0 0 66.67%;
  }
  .flexgrid .row.no-gutter .col-5-xl {
    flex: 0 0 83.33%;
  }
  .flexgrid .row.no-gutter .col-6-xl {
    flex: 0 0 100%;
  }
}

.spacer.small {
  height: 4px;
}
.spacer.medium {
  height: 6px;
}
.spacer.large {
  height: 10px;
}
.spacer.xlarge {
  height: 10px;
}

body {
  font-size: 16px;
}

p {
  margin: 1em 0;
}

.intro-text {
  font-size: 2em;
  font-weight: 100;
  max-width: 1100px;
}

header {
  background: #fff;
  border-bottom: solid 1px #dfdfdf;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 99;
  box-shadow: 0px 2px 5px rgba(82, 82, 82, 0.75);
}

.card {
  border: solid 1px rgba(136, 136, 136, 0.5);
  border-radius: 5px;
  box-shadow: 5px 5px 5px rgba(136, 136, 136, 0.5);
  overflow: hidden;
  max-width: 480px;
  margin: 0 auto;
}

.feature {
  color: #fff;
}
.feature h3 {
  padding: 0.5em 0;
  text-align: center;
  color: #333;
}

.btn {
  padding: 12px 12px 12px 24px;
  font-size: 0.83em;
  color: #fff;
  background: #567ad7;
  margin-top: 10px;
  margin-bottom: 26px;
  float: right;
  transition: all 250ms ease-in-out;
  border-radius: 5px;
  box-shadow: 5px 5px 5px rgba(136, 136, 136, 0.5);
}
.btn-left {
  float: none;
}
.btn:hover {
  background: #2b52b6;
}

.small-divider {
  width: 25%;
  height: 2px;
  margin: 10px auto;
  background: #282828;
}

section.home {
  padding: 10px 0;
  margin: 0;
}
@media only screen and (min-width: 48em) {
  section.home {
    padding: 42px 0;
  }
}

.feature {
  position: relative;
  max-width: 480px;
  margin: auto;
}
.feature img {
  display: block;
  margin: auto;
}
.feature__content {
  position: absolute;
  top: 20%;
  text-align: center;
  width: calc(100% - 16px);
  margin: 0 8px;
}
.feature__content--uni {
  top: 8px;
  left: 0px;
}
.feature__content--uni img {
  width: 200px;
  padding: 8px;
  margin-left: 0;
  background: #fff;
}
.feature__content--lar {
  top: 0px;
  left: 0px;
}
.feature__content--lar img {
  width: 150px;
  padding: 0px;
  margin-left: 0;
}
.feature__caption {
  position: absolute;
  bottom: 0;
  top: 50%;
  font-size: 0.83em;
  font-weight: 300;
  background-image: linear-gradient(to top, #401801, rgba(64, 24, 1, 0));
  padding: 0 1em;
  width: 100%;
  text-align: center;
}
.feature__caption p {
  position: absolute;
  bottom: 5px;
}

.logo {
  width: 100%;
  max-width: 285px;
  padding: 12px 20px;
}
@media only screen and (min-width: 48em) {
  .logo {
    max-width: 340px;
    padding: 10px 20px;
  }
}

.toggle {
  padding: 0px 20px;
}
@media only screen and (min-width: 48em) {
  .toggle {
    padding: 20px 40px;
  }
}

.hamburger .line {
  width: 28px;
  height: 3px;
  margin: 4px auto;
  background-color: #282828;
  display: block;
  transition: all 0.3s ease-in-out;
}
@media only screen and (min-width: 48em) {
  .hamburger .line {
    width: 50px;
    height: 5px;
    margin: 8px auto;
  }
}
.hamburger:hover {
  cursor: pointer;
}

/* NINE */
#hamburger-9 {
  position: relative;
  transition: all 0.3s ease-in-out;
}

#hamburger-9.is-active {
  transform: rotate(45deg);
}

#hamburger-9:before {
  content: "";
  position: absolute;
  box-sizing: border-box;
  width: 70px;
  height: 70px;
  border: 5px solid transparent;
  top: calc(50% - 35px);
  left: calc(50% - 35px);
  border-radius: 100%;
  transition: all 0.3s ease-in-out;
}

/* ONE */
#hamburger-1.is-active .line:nth-child(2) {
  opacity: 0;
}

#hamburger-1.is-active .line:nth-child(1) {
  transform: translateY(13px) rotate(45deg);
}

#hamburger-1.is-active .line:nth-child(3) {
  transform: translateY(-13px) rotate(-45deg);
}

#hamburger-1.is-active .line {
  margin: 10px auto;
}
@media only screen and (min-width: 48em) {
  #hamburger-1.is-active .line {
    margin: 8px auto;
  }
}

.description {
  text-align: center;
  color: #000;
}

.selected {
  font-family: "questa_sansbold";
  text-decoration: underline;
}

.social-icons {
  font-size: 1.5em;
  margin: 10px auto;
}

footer {
  padding: 100px 0;
}

.b-grad {
  padding: 50px 16px;
  color: #fff;
  background: #000;
  background-image: radial-gradient(ellipse at bottom, #545454 0%, black 100%);
}

.earth {
  position: relative;
  overflow: hidden;
  padding: 50px 16px 300px 16px;
}
@media only screen and (min-width: 62em) {
  .earth {
    padding: 100px 16px 500px 16px;
  }
}
.earth__globe {
  position: absolute;
  top: 100%;
  transform: translateY(-80%);
}
@media only screen and (min-width: 62em) {
  .earth__globe {
    transform: translateY(-60%);
  }
}

.intro {
  padding: 50px 0;
}

.mobile-images img {
  margin: 0 42px;
}

.space {
  padding: 100px 0;
}
@media only screen and (min-width: 62em) {
  .space {
    padding: 200px 0;
  }
}

.image-section {
  background-image: url("../img/ugo-howmightwe.jpg");
  background-repeat: no-repeat;
  background-size: auto 200%;
  background-position: center 50%;
  height: 768px;
}
@media only screen and (min-width: 30em) {
  .image-section {
    background-size: auto 180%;
  }
}
@media only screen and (min-width: 48em) {
  .image-section {
    background-size: auto 150%;
  }
}
@media only screen and (min-width: 62em) {
  .image-section {
    background-size: auto 110%;
  }
}
.image-section__copy {
  color: #fff;
  margin-top: 25%;
}
.image-section .hmw {
  display: block;
  margin-bottom: 0.4em;
  font-size: 1.6em;
}

.persona {
  position: relative;
  overflow: hidden;
}
.persona__copy {
  overflow: hidden;
}
@media only screen and (min-width: 62em) {
  .persona__copy {
    position: absolute;
    top: 50%;
    left: 62%;
    transform: translate(-62%, -50%);
    z-index: 5;
  }
}
.persona__image {
  transform: scale(1.3);
}
@media only screen and (min-width: 62em) {
  .persona__image {
    transform: scale(1);
  }
}

.urc-desk {
  max-width: 1000px;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.nav-overlay {
  position: fixed;
  z-index: 98;
  background: rgba(233, 233, 233, 0.97);
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: none;
  opacity: 0;
}
.nav-overlay.is-active {
  display: block;
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-duration: 750ms;
          animation-duration: 750ms;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.nav-overlay nav {
  position: absolute;
  color: #686868;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.6em;
  font-weight: 300;
  width: 800px;
  max-width: 100%;
  min-width: 260px;
}
.nav-overlay nav ul {
  margin: 0 16px;
  display: block;
}
.nav-overlay nav ul li {
  padding: 5px 0;
  margin: 5px 0;
}
.nav-overlay nav ul li ul > li {
  display: flex;
}
.nav-overlay nav ul li ul > li a {
  width: 100%;
  color: #686868;
}
.nav-overlay nav ul li ul > li a:hover {
  color: #171717;
}
.nav-overlay nav ul li ul > li.animate {
  justify-content: space-between;
  border-bottom: solid 1px #9b9b9b;
}
.nav-overlay nav ul li ul > li.animate i {
  margin-right: 10px;
  transition: all 200ms linear;
}
.nav-overlay nav ul li ul > li.animate:hover i {
  margin-right: 0px;
}
.nav-overlay nav ul li ul.icons {
  font-size: 0.87em;
}
.nav-overlay nav ul li ul.icons li {
  justify-content: flex-start;
}
.nav-overlay nav ul li ul.icons li a {
  margin-right: 1em;
  width: auto;
}
.nav-overlay .nav-header {
  font-size: 0.7em;
  color: #000;
  font-weight: 300;
  font-style: italic;
}

body.portfolio-site {
  margin: 0;
  font-family: "Oxygen", sans-serif;
  font-weight: 400;
  color: #1e1e1e;
}

#topcurve {
  width: 100%;
  height: auto;
  display: block;
}

#bottomcurve {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: -10px;
}

header_v2 {
  max-width: 800px;
  margin: 0 auto;
}
header_v2 p {
  font-size: 1.23em;
  line-height: 1.5em;
}

.creative-link {
  transition: all 500ms ease;
  text-decoration: none;
  position: relative;
  letter-spacing: 0.025em;
}
.creative-link:first-child {
  color: #631a7c;
}
.creative-link:nth-child(2) {
  color: #428459;
}
.creative-link:nth-child(3) {
  color: #da893e;
}
.creative-link:after {
  content: "";
  transition: all 500ms ease;
  position: absolute;
  top: 100%;
  bottom: 0;
  left: -3px;
  right: -3px;
  z-index: -1;
}
.creative-link:first-child::after {
  background-color: #631a7c;
}
.creative-link:nth-child(2)::after {
  background-color: #428459;
}
.creative-link:nth-child(3)::after {
  background-color: #da893e;
}
.creative-link:hover {
  color: #fff;
}
.creative-link:hover:after {
  top: 0;
}

.project-card {
  transition: all 500ms ease;
  position: relative;
  transform: translateX(0px) translateY(0px);
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  -moz-column-gap: 8px;
       column-gap: 8px;
  max-width: 800px;
  margin: 48px auto;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
  border: solid 1px rgba(0, 0, 0, 0);
  padding: 8px;
  padding-bottom: 16px;
  text-align: center;
}
@media screen and (min-width: 600px) {
  .project-card {
    grid-template-columns: 6fr 8fr;
    text-align: left;
  }
}
.project-card h3,
.project-card p {
  margin: 8px 0;
}
.project-card__content {
  align-self: center;
  align-items: center;
  display: grid;
  margin-right: 16px;
}
.project-card__content .btn-ghost {
  transition: all 500ms ease;
  justify-self: end;
  margin-top: 16px;
  margin-right: 32px;
  text-decoration: none;
  color: #648ad3;
  position: relative;
  border: solid 1px #648ad3;
  padding: 4px 19px 4px 8px;
  font-size: 0.83em;
  border-radius: 3px;
}
.project-card__content .btn-ghost:after {
  content: "\f006";
  font-family: fontello;
  transition: all 500ms ease;
  position: absolute;
  transform: translateX(5px) translateY(2px);
}
.project-card__content .btn-ghost:hover {
  margin-right: 18px;
  padding-right: 26px;
}
.project-card__content .btn-ghost:hover:after {
  transform: translateX(10px) translateY(2px);
}
.project-card img {
  display: block;
}
.project-card:hover {
  transform: translateX(0px) translateY(0px);
  box-shadow: 4px 4px -2px rgba(0, 0, 0, 0.2);
  border: solid 1px rgba(0, 0, 0, 0.2);
}
.project-card:hover a {
  margin-right: 24px;
}

#home_v2 {
  max-width: 800px;
  margin: 0 auto;
}

.intro_v2 {
  font-size: 1.23em;
}
.intro_v2 p {
  line-height: 1.5em;
}

#home_foot {
  position: relative;
}

.svg-wrap {
  width: 100vw;
}

.footlinker {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0) scale(1);
  color: #fff;
}

[tooltip] {
  position: relative;
  /* opinion 1 */
}

/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
  text-transform: none;
  /* opinion 2 */
  font-size: 0.9em;
  /* opinion 3 */
  line-height: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}

[tooltip]::before {
  content: "";
  border: 5px solid transparent;
  /* opinion 4 */
  z-index: 1001;
  /* absurdity 1 */
}

[tooltip]::after {
  content: attr(tooltip);
  /* magic! */
  /* most of the rest of this is opinion */
  font-size: 0.6em;
  text-align: center;
  /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1ch 1.5ch;
  border-radius: 0.3ch;
  box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
  background: #333;
  color: #fff;
  z-index: 1000;
  /* absurdity 2 */
}

/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}

/* don't show empty tooltips */
[tooltip=""]::before,
[tooltip=""]::after {
  display: none !important;
}

/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^=up]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #333;
}

[tooltip]:not([flow])::after,
[tooltip][flow^=up]::after {
  bottom: calc(100% + 5px);
}

[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^=up]::before,
[tooltip][flow^=up]::after {
  left: 50%;
  transform: translate(-50%, -0.5em);
}

/* FLOW: DOWN */
[tooltip][flow^=down]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #333;
}

[tooltip][flow^=down]::after {
  top: calc(100% + 5px);
}

[tooltip][flow^=down]::before,
[tooltip][flow^=down]::after {
  left: 50%;
  transform: translate(-50%, 0.5em);
}

/* FLOW: LEFT */
[tooltip][flow^=left]::before {
  top: 50%;
  border-right-width: 0;
  border-left-color: #333;
  left: calc(0em - 5px);
  transform: translate(-0.5em, -50%);
}

[tooltip][flow^=left]::after {
  top: 50%;
  right: calc(100% + 5px);
  transform: translate(-0.5em, -50%);
}

/* FLOW: RIGHT */
[tooltip][flow^=right]::before {
  top: 50%;
  border-left-width: 0;
  border-right-color: #333;
  right: calc(0em - 5px);
  transform: translate(0.5em, -50%);
}

[tooltip][flow^=right]::after {
  top: 50%;
  left: calc(100% + 5px);
  transform: translate(0.5em, -50%);
}

/* KEYFRAMES */
@-webkit-keyframes tooltips-vert {
  to {
    opacity: 0.9;
    transform: translate(-50%, 0);
  }
}
@keyframes tooltips-vert {
  to {
    opacity: 0.9;
    transform: translate(-50%, 0);
  }
}
@-webkit-keyframes tooltips-horz {
  to {
    opacity: 0.9;
    transform: translate(0, -50%);
  }
}
@keyframes tooltips-horz {
  to {
    opacity: 0.9;
    transform: translate(0, -50%);
  }
}
/* FX All The Things */
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^=up]:hover::before,
[tooltip][flow^=up]:hover::after,
[tooltip][flow^=down]:hover::before,
[tooltip][flow^=down]:hover::after {
  -webkit-animation: tooltips-vert 300ms ease-out forwards;
          animation: tooltips-vert 300ms ease-out forwards;
}

[tooltip][flow^=left]:hover::before,
[tooltip][flow^=left]:hover::after,
[tooltip][flow^=right]:hover::before,
[tooltip][flow^=right]:hover::after {
  -webkit-animation: tooltips-horz 300ms ease-out forwards;
          animation: tooltips-horz 300ms ease-out forwards;
}

.feature-title span {
  position: relative;
  color: #648ad3;
}
.feature-title span::after {
  content: "";
  width: 150px;
  height: 2px;
  border-radius: 2px;
  background-color: #648ad3;
  position: absolute;
  top: 64%;
  margin-top: -1px;
  left: calc(100% + 24px);
  display: inline-block;
}
/*# sourceMappingURL=styles.css.map */