@import url('https://fonts.googleapis.com/css?family=Karla:400,700');
body {
  margin: 0;
}
header {
  overflow: hidden;
}
section {
  padding: 210px 0;
}
section.light {
  background: #f8f8f8;
}
section.dark {
  background: #1A2025;
  color: #ffffff;
}
@media only screen and (max-width: 700px) {
  section {
    padding: 80px 0;
  }
  nav + section {
    padding-top: 120px;
  }
}
.wrapper {
  width: 1184px;
  max-width: 100%;
  margin: auto;
  padding: 0 28px;
  box-sizing: border-box;
}
@media only screen and (max-width: 700px) {
  .wrapper {
    padding: 0 22px;
  }
}
.text-wrapper {
  max-width: 744px;
  margin: auto;
}
.text-wrapper + .columns,
.text-wrapper + video,
.text-wrapper + img {
  margin-top: 100px;
}
@media only screen and (max-width: 700px) {
  .text-wrapper + .columns,
  .text-wrapper + video,
  .text-wrapper + img {
    margin-top: 50px;
  }
}
.columns {
  width: 100%;
  margin: 0 auto;
}
.columns:after {
  content: '';
  clear: both;
  display: table;
}
.columns + .columns {
  margin-top: 10%;
}
.columns + .text-wrapper {
  margin-top: 100px;
}
@media only screen and (max-width: 700px) {
  .columns + .text-wrapper {
    margin-top: 50px;
  }
}
.columns .column {
  float: left;
  text-align: center;
}
.columns .column:first-child {
  margin-right: 5%;
}
.columns .column:last-child {
  margin-left: 5%;
}
.columns.two {
  max-width: 744px;
}
.columns.two .column {
  width: 45%;
}
.columns.two.wide {
  max-width: 100%;
}
.columns.three .column {
  width: 30%;
}
@media only screen and (max-width: 700px) {
  .columns {
    flex-wrap: wrap;
  }
  .columns + .columns {
    margin-top: 50px;
  }
  .columns.two .column,
  .columns.three .column {
    float: none;
    width: 100%;
    margin: 0;
  }
  .columns.two .column + .column,
  .columns.three .column + .column {
    margin-top: 50px;
  }
}
.content-style-one {
  border-radius: 15px;
  box-shadow: 3px 8px 18px rgba(0, 0, 0, 0.1);
}
section.dark + .content-style-one {
  box-shadow: 0px 10px 32px rgba(0, 0, 0, 0.5);
}
img {
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
img + img {
  margin-top: 100px;
}
img.desktop-only {
  display: block;
}
@media only screen and (max-width: 700px) {
  img.desktop-only {
    display: none;
  }
}
img.mobile-only {
  display: none;
}
@media only screen and (max-width: 700px) {
  img.mobile-only {
    display: block;
  }
}
video {
  max-width: 100%;
  display: block;
}
video.mobile {
  max-width: 380px;
}
@media only screen and (max-width: 700px) {
  video.mobile {
    max-width: 100%;
  }
}
video.video-center {
  margin-left: auto;
  margin-right: auto;
}
body {
  font-size: 10px;
  font-family: 'Karla', sans-serif;
  color: #1A2025;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1 {
  font-size: 6.8em;
  font-weight: 700;
  margin: 0;
  line-height: 1.25em;
}
h2 {
  font-size: 5.4em;
  font-weight: 700;
  margin: 0;
  line-height: 1.3em;
}
@media only screen and (max-width: 700px) {
  h2 {
    font-size: 4em;
    line-height: 1.3em;
  }
}
h3 {
  font-size: 4.4em;
  font-weight: 700;
  margin: 0;
  line-height: 1.4em;
  letter-spacing: 0.5px;
}
@media only screen and (max-width: 700px) {
  h3 {
    font-size: 3.8em;
  }
}
h4 {
  font-size: 3.1em;
  font-weight: 700;
  margin: 0;
}
h4 + p {
  margin-top: 14px;
}
@media only screen and (max-width: 700px) {
  h4 {
    font-size: 2.6em;
  }
}
p {
  font-weight: 400;
  font-size: 2.2em;
  line-height: 2em;
  margin: 0;
}
h2 + p {
  margin-top: 23px;
}
p + p {
  margin-top: 50px;
}
@media only screen and (max-width: 700px) {
  p {
    font-size: 1.9em;
    line-height: 2.2em;
  }
}
.underline {
  position: relative;
  z-index: 1;
}
.underline:after {
  display: inline-block;
  content: '';
  background: linear-gradient(to bottom right, #80EECF, #8AE3EE);
  width: 100%;
  position: absolute;
  z-index: -1;
}
p .underline {
  font-weight: 700;
}
p .underline:after {
  height: 8px;
  bottom: 1px;
  left: 0px;
}
@media only screen and (max-width: 700px) {
  p .underline:after {
    display: none;
  }
}
h1 .underline:after {
  bottom: 10px;
  left: 0px;
  height: 16px;
}
@media only screen and (max-width: 700px) {
  h1 .underline:after {
    bottom: 6px;
    height: 12px;
  }
}
h2 .underline:after {
  bottom: 7px;
  left: 0px;
  height: 14px;
}
@media only screen and (max-width: 700px) {
  h2 .underline:after {
    bottom: 5px;
  }
}
h4 .underline:after {
  height: 8px;
  bottom: 4px;
  left: 0px;
}
h3 .underline:after {
  height: 8px;
  bottom: 6px;
  left: 0px;
}
nav {
  height: 96px;
  width: 100%;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.05);
  transform: translateY(0);
  transition: 0.4s ease;
}
nav.navigation-light {
  background-color: rgba(255, 255, 255, 0);
  box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0);
}
nav .wrapper a {
  text-decoration: none;
  line-height: 96px;
  text-transform: lowercase;
}
nav .wrapper .logo-wrapper {
  float: left;
  font-weight: 800;
  letter-spacing: 0.8px;
}
nav .wrapper .logo-wrapper .emoji {
  font-size: 2.4em;
}
nav .wrapper .logo-wrapper a {
  background: linear-gradient(to bottom right, #26D0A0, #15C1D5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 2.6em;
  display: inline-block;
  margin-left: 8px;
}
nav .wrapper .mobile-menu {
  display: none;
}
nav .wrapper .link-wrapper {
  float: right;
}
nav .wrapper .link-wrapper a {
  position: relative;
  z-index: 1;
  color: #7e7e7e;
  margin-left: 50px;
  font-weight: 700;
  font-size: 2.0em;
  letter-spacing: 0.4px;
}
nav .wrapper .link-wrapper a.active {
  color: #1A2025;
}
nav .wrapper .link-wrapper a.active:after {
  display: inline-block;
  content: '';
  background: linear-gradient(to bottom right, #80EECF, #8AE3EE);
  height: 30px;
  position: absolute;
  z-index: -1;
  top: -3px;
  left: -12px;
  right: -12px;
  border-radius: 20px;
}
nav.small {
  height: 81px;
  transform: translateY(-15px);
}
nav.small.navigation-light {
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.05);
  -webkit-backdrop-filter: blur(36px);
  backdrop-filter: blur(36px);
}
@media only screen and (max-width: 700px) {
  nav {
    background: rgba(255, 255, 255, 0.5);
    height: 70px;
  }
  nav .wrapper {
    position: relative;
    padding: 0;
    overflow: hidden;
    height: 70px;
    background: #ffffff;
    box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.05);
    transition: 0.5s cubic-bezier(0.42, 0.28, 0.29, 0.99);
  }
  nav .wrapper .logo-wrapper {
    float: none;
    display: block;
  }
  nav .wrapper .logo-wrapper .emoji {
    margin-left: 22px;
  }
  nav .wrapper .logo-wrapper a {
    line-height: 70px;
  }
  nav .wrapper .reveal-menu {
    display: flex;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 9;
    height: 70px;
    width: 70px;
  }
  nav .wrapper .reveal-menu .menu-icon {
    position: relative;
    width: 30px;
    height: 21px;
    margin: 0 auto;
    align-self: center;
  }
  nav .wrapper .reveal-menu .menu-icon .top,
  nav .wrapper .reveal-menu .menu-icon .center,
  nav .wrapper .reveal-menu .menu-icon .bottom {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background: #1A2025;
    border-radius: 2px;
    transition: 0.4s ease;
  }
  nav .wrapper .reveal-menu .menu-icon .top {
    top: 0;
  }
  nav .wrapper .reveal-menu .menu-icon .center {
    top: 9px;
  }
  nav .wrapper .reveal-menu .menu-icon .bottom {
    bottom: 0;
  }
  nav .wrapper .link-wrapper {
    visibility: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  nav .wrapper .link-wrapper a {
    font-size: 2.6em;
    display: inline-block;
    height: 75px;
    line-height: 75px;
    margin: 0;
    transition: 0.8s ease;
    color: #1A2025;
    transition: 0.5s ease;
    opacity: 0;
    transform: translateY(-20px);
    transition: 0.15s ease;
  }
  nav .wrapper .link-wrapper a:nth-child(1) {
    transition-delay: 0;
  }
  nav .wrapper .link-wrapper a:nth-child(2) {
    transition-delay: 0;
  }
  nav .wrapper .link-wrapper a:nth-child(3) {
    transition-delay: 0;
  }
  nav .wrapper .link-wrapper a:nth-child(4) {
    transition-delay: 0;
  }
  nav .wrapper .link-wrapper a.active:after {
    top: 14px;
    height: 50px;
    border-radius: 30px;
    left: -24px;
    right: -24px;
  }
  nav.show .wrapper {
    height: 100vh;
  }
  nav.show .wrapper .link-wrapper {
    visibility: visible;
  }
  nav.show .wrapper .link-wrapper a {
    opacity: 1;
    transform: translateY(0);
    transition: 0.35s ease;
  }
  nav.show .wrapper .link-wrapper a:nth-child(1) {
    transition-delay: 0.20s;
  }
  nav.show .wrapper .link-wrapper a:nth-child(2) {
    transition-delay: 0.25s;
  }
  nav.show .wrapper .link-wrapper a:nth-child(3) {
    transition-delay: 0.30s;
  }
  nav.show .wrapper .link-wrapper a:nth-child(4) {
    transition-delay: 0.35s;
  }
  nav.show .wrapper .reveal-menu .menu-icon .top {
    transform: rotate(45deg) translateX(7px) translateY(6px);
  }
  nav.show .wrapper .reveal-menu .menu-icon .center {
    transform: scaleX(0);
  }
  nav.show .wrapper .reveal-menu .menu-icon .bottom {
    transform: rotate(-45deg) translateX(7px) translateY(-5px);
  }
}
.grid-wrapper {
  position: relative;
  width: 100%;
}
.grid-wrapper:after {
  display: block;
  content: '';
  padding-bottom: 164.48%;
}
.grid-wrapper .grid-item {
  display: block;
  color: #1A2025;
  text-decoration: none;
  border-radius: 40px;
}
.grid-wrapper .grid-item:after {
  display: block;
  content: '';
  height: 115px;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background: url("/core/images/shadow.png") repeat-x;
  opacity: 0.2;
  z-index: 2;
}
.grid-wrapper .grid-item h4 {
  font-family: 'Muli', sans-serif;
}
.grid-wrapper .grid-item h2 {
  margin-top: 2px;
}
.grid-wrapper .grid-item h2.arrow:after {
  display: inline-block;
  content: '';
  width: 28px;
  height: 28px;
  margin-left: 18px;
}
.grid-wrapper .grid-item h2.arrow.light:after {
  background: url('/core/images/arrow-right-light.svg') center center no-repeat;
}
.grid-wrapper .grid-item h2.arrow.dark:after {
  background: url('/core/images/arrow-right-dark.svg') center center no-repeat;
}
.grid-wrapper .grid-item.highstreet-app {
  color: #ffffff;
  background: #1A2025;
}
.grid-wrapper .grid-item.tikkie-business {
  background: #4DB6AC;
}
.grid-wrapper .grid-item.weeronline {
  background: #FFD65C;
}
.grid-wrapper .grid-item.tikkie-consumer {
  color: #ffffff;
  background: #2E2E5F;
}
.grid-wrapper .grid-item.pon {
  background: #D6DBE3;
}
.grid-wrapper .grid-item.landal {
  background: #5A97CD;
}
@media only screen and (min-width: 700px) {
  .grid-wrapper .grid-item {
    position: absolute;
    overflow: hidden;
    width: 48.76%;
    height: 29.25%;
  }
  .grid-wrapper .grid-item.large {
    height: 38.51%;
  }
  .grid-wrapper .grid-item h4 {
    position: absolute;
    top: 10%;
    left: 11.27%;
    font-size: 2vw;
    transform: translateY(-650%);
  }
  .grid-wrapper .grid-item h2 {
    position: absolute;
    left: 11.27%;
    right: 11.27%;
    top: 17%;
    font-size: 4.4vw;
    transform: translateY(-170%);
  }
  .grid-wrapper .grid-item img {
    position: absolute;
    width: 71.27%;
    left: 50%;
  }
  .grid-wrapper .grid-item img,
  .grid-wrapper .grid-item h4,
  .grid-wrapper .grid-item h2 {
    transition: 0.5s ease;
  }
  .grid-wrapper .grid-item h2 {
    transition-delay: 0.02s;
  }
  .grid-wrapper .grid-item h4,
  .grid-wrapper .grid-item h2 {
    opacity: 0;
  }
  .grid-wrapper .grid-item:hover h2 {
    opacity: 1;
    transform: translateY(0);
  }
  .grid-wrapper .grid-item:hover h4 {
    opacity: 0.6;
    transform: translateY(0);
  }
  .grid-wrapper .grid-item.highstreet-app h2 {
    top: 16%;
  }
  .grid-wrapper .grid-item.highstreet-app img {
    top: 15%;
    transform: translateX(-50%) translateY(0);
  }
  .grid-wrapper .grid-item.highstreet-app:hover img {
    transform: translateX(-50%) translateY(35%);
  }
  .grid-wrapper .grid-item.tikkie-business {
    right: 0;
    top: 0;
  }
  .grid-wrapper .grid-item.tikkie-business img {
    top: 23%;
    left: 18%;
    width: 114%;
    max-width: none;
    transform: translateY(0);
  }
  .grid-wrapper .grid-item.tikkie-business:hover img {
    transform: translateY(28%);
  }
  .grid-wrapper .grid-item.weeronline {
    left: 0;
    top: 40%;
  }
  .grid-wrapper .grid-item.weeronline img {
    top: 13%;
    transform: translateX(-50%) translateY(0);
  }
  .grid-wrapper .grid-item.weeronline:hover img {
    transform: translateX(-50%) translateY(28%);
  }
  .grid-wrapper .grid-item.tikkie-consumer {
    right: 0;
    top: 30.74%;
  }
  .grid-wrapper .grid-item.tikkie-consumer img {
    top: 13%;
    transform: translateX(-50%) translateY(0);
  }
  .grid-wrapper .grid-item.tikkie-consumer:hover img {
    transform: translateX(-50%) translateY(35%);
  }
  .grid-wrapper .grid-item.landal {
    right: 0;
    bottom: 0;
  }
  .grid-wrapper .grid-item.landal h2 {
    top: 16%;
  }
  .grid-wrapper .grid-item.landal img {
    top: 17%;
    transform: translateX(-50%) translateY(0);
  }
  .grid-wrapper .grid-item.landal:hover img {
    transform: translateX(-50%) translateY(32%);
  }
  .grid-wrapper .grid-item.pon {
    left: 0;
    bottom: 0;
  }
  .grid-wrapper .grid-item.pon img {
    top: 23%;
    left: 18%;
    width: 114%;
    max-width: none;
    transform: translateY(0);
  }
  .grid-wrapper .grid-item.pon:hover img {
    transform: translateY(45%);
  }
}
@media only screen and (min-width: 1182px) {
  .grid-wrapper .grid-item h4 {
    font-size: 3.1em;
  }
  .grid-wrapper .grid-item h2 {
    font-size: 5.4em;
  }
}
@media only screen and (max-width: 700px) {
  .grid-wrapper {
    display: flex;
    flex-direction: column;
  }
  .grid-wrapper:after {
    display: none;
  }
  .grid-wrapper .grid-item {
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 0;
    padding: 0 22px;
    position: relative;
    padding-top: 45px;
    margin-left: -22px;
    margin-right: -22px;
  }
  .grid-wrapper .grid-item h2 {
    margin-bottom: 40px;
  }
  .grid-wrapper .grid-item h4 {
    opacity: 0.6;
  }
  .grid-wrapper .grid-item.highstreet-app,
  .grid-wrapper .grid-item.weeronline,
  .grid-wrapper .grid-item.landal,
  .grid-wrapper .grid-item.tikkie-consumer {
    height: 640px;
  }
  .grid-wrapper .grid-item.pon,
  .grid-wrapper .grid-item.tikkie-business {
    height: 500px;
  }
  .grid-wrapper .grid-item.pon img,
  .grid-wrapper .grid-item.tikkie-business img {
    max-width: 422px;
  }
  .grid-wrapper .grid-item.highstreet-app {
    order: 1;
  }
  .grid-wrapper .grid-item.tikkie-business {
    order: 2;
  }
  .grid-wrapper .grid-item.tikkie-consumer {
    order: 3;
  }
  .grid-wrapper .grid-item.weeronline {
    order: 4;
  }
  .grid-wrapper .grid-item.landal {
    order: 5;
  }
  .grid-wrapper .grid-item.pon {
    order: 6;
  }
}
header {
  height: 100vh;
  background: #1A2025;
}
header .wrapper {
  padding-top: 96px;
  height: 100vh;
}
header .wrapper .columns {
  display: flex;
  height: 100%;
  max-width: none;
  overflow: visible;
}
header .wrapper .columns .column {
  align-self: flex-end;
  position: relative;
  z-index: 1;
  text-align: left;
  margin: 0;
  width: 50%;
}
header .wrapper .columns .column + .column {
  align-self: center;
  position: relative;
  z-index: 2;
}
header .wrapper .project-image {
  width: 418px;
  animation: project-move 1.4s ease;
  margin: 0;
  margin-bottom: -36%;
}
header .wrapper h1 {
  font-size: 7.3vw;
  animation: text-move 1.4s ease;
}
@media only screen and (min-width: 910px) {
  header .wrapper h1 {
    font-size: 6.6em;
  }
}
header .wrapper h4 {
  animation: text-h4-move 1.4s ease;
  opacity: 0.6;
}
header .wrapper p {
  animation: text-move 1.4s ease;
}
header .wrapper .arrow {
  height: 28px;
  width: 17px;
  position: relative;
  animation: arrow-opacity 1.4s ease, arrow-move 1.6s 1.4s infinite ease;
  margin: 0;
  margin-top: 25px;
}
@media only screen and (max-width: 700px) {
  header {
    height: 100vh;
    min-height: 662px;
  }
  header .wrapper {
    padding-top: 70px;
    height: 100vh;
    min-height: 662px;
    position: relative;
  }
  header .wrapper h1 {
    font-size: 4.4em;
    line-height: 1.35em;
  }
  header .wrapper .arrow {
    display: none;
  }
  header .wrapper .columns {
    flex-wrap: wrap;
  }
  header .wrapper .columns .column {
    float: none;
    width: 100%;
    padding: 0;
  }
  header .wrapper .columns .column:first-child {
    order: 2;
    align-self: auto;
  }
  header .wrapper .columns .column:last-child {
    order: 1;
    align-self: auto;
    margin-bottom: 50px;
  }
}
@keyframes arrow-move {
  0% {
    top: 0px;
  }
  50% {
    top: 15px;
  }
  100% {
    top: 0px;
  }
}
@keyframes text-move {
  0% {
    opacity: 0;
    transform: translateY(-25%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes text-h4-move {
  0% {
    opacity: 0;
    transform: translateY(-90%);
  }
  100% {
    opacity: 0.6;
    transform: translateY(0);
  }
}
@keyframes arrow-opacity {
  0% {
    opacity: 0.5;
    transform: translateY(-120%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes project-move {
  0% {
    opacity: 0.5;
    transform: translateY(10%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
footer {
  margin: 0;
  height: 100vh;
  box-sizing: border-box;
}
footer .wrapper {
  display: flex;
  height: 100%;
  background: #1A2025;
  width: 100%;
}
@media only screen and (max-width: 700px) {
  footer .wrapper {
    padding-top: 0;
    padding-bottom: 0;
  }
}
footer .text-wrapper {
  align-self: center;
  padding-top: 81px;
}
@media only screen and (max-width: 700px) {
  footer .text-wrapper {
    padding-top: 70px;
  }
}
footer .text-wrapper h2 {
  max-width: 744px;
  color: #ffffff;
  padding-bottom: 40px;
}
@media only screen and (max-width: 700px) {
  footer .text-wrapper h2 {
    font-size: 4.0em;
    line-height: 1.4em;
  }
}
.text-wrapper a {
  display: inline-block;
  font-size: 2.3em;
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  background: linear-gradient(to bottom right, #26D0A0, #15C1D5);
  height: 64px;
  line-height: 64px;
  padding: 0 30px;
  border-radius: 50px;
}
@media only screen and (max-width: 700px) {
  .text-wrapper a {
    font-size: 1.8em;
  }
}
p + a {
  margin-top: 40px;
}
.columns.icons {
  width: 100%;
  text-align: center;
}
.columns.icons .icon-wrapper {
  display: inline-block;
}
.columns.icons .column {
  width: auto;
  margin: 0 50px;
}
.columns.icons .column:first-child {
  margin-left: 0;
}
.columns.icons .column:last-child {
  margin-right: 0;
}
.columns.icons .column h4 {
  margin-top: 28px;
  text-align: center;
}
@media only screen and (max-width: 700px) {
  .columns.icons .column {
    width: 50%;
    margin: 0;
  }
  .columns.icons .column:nth-of-type(n+3) {
    margin-top: 50px;
  }
}
.icon {
  position: relative;
  display: block;
  width: 130px;
  height: 130px;
  background: #ffffff;
  border-radius: 25px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}
@media only screen and (max-width: 700px) {
  .icon {
    width: 100px;
    height: 100px;
  }
}
.icon img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 80px;
  height: 80px;
}
@media only screen and (max-width: 700px) {
  .icon img {
    width: 60px;
    height: 60px;
  }
}
.home-header .wrapper {
  color: #ffffff;
}
.home-header .wrapper .profile-picture {
  width: 144%;
  max-width: none;
  margin-left: -10%;
  margin-bottom: -10%;
  animation: profile-move 1.4s ease;
  position: relative;
  z-index: 2;
}
@media only screen and (max-width: 700px) {
  .home-header {
    height: auto;
    min-height: auto;
  }
  .home-header .wrapper {
    height: auto;
    min-height: auto;
  }
  .home-header .wrapper .profile-picture {
    width: 140%;
    margin-left: -20%;
  }
}
@keyframes profile-move {
  0% {
    opacity: 0.5;
    transform: translateY(15%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
@keyframes pattern-move {
  0% {
    opacity: 0;
    transform: rotate(45deg) translateX(22%) translateY(86%);
  }
  100% {
    opacity: 1;
    transform: rotate(45deg) translateX(14%) translateY(76%);
  }
}
@media only screen and (max-width: 700px) {
  .home-portfolio-grid {
    padding: 0;
  }
}
.home-design-process .text-column {
  position: relative;
  margin-top: 70px;
}
.home-design-process .text-column:nth-of-type(1) {
  margin-top: 100px;
}
.home-design-process .text-column .icon {
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(to bottom right, #24E5AF, #22D7EC);
  box-shadow: none;
}
.home-design-process .text-column .text {
  width: 100%;
  padding-left: 194px;
  box-sizing: border-box;
  padding-top: 24px;
}
@media only screen and (max-width: 700px) {
  .home-design-process .text-column .text {
    padding-top: 28px;
  }
}
.home-design-process .text-column .text p {
  line-height: 1.9em;
  margin: 10px 0 0 0;
}
@media only screen and (max-width: 700px) {
  .home-design-process .text-column .text p {
    line-height: 2.2em;
  }
}
@media only screen and (max-width: 700px) {
  .home-design-process .text-column {
    margin-top: 50px;
  }
  .home-design-process .text-column:nth-of-type(1) {
    margin-top: 50px;
  }
  .home-design-process .text-column .icon {
    position: relative;
  }
  .home-design-process .text-column .text {
    padding-left: 0;
  }
}
@media only screen and (max-width: 700px) {
  .page-mijn-werk {
    padding-bottom: 0;
  }
}
.page-mijn-werk .text-wrapper + .grid-wrapper {
  margin-top: 100px;
}
@bigger-than-mobile {
  height: 100vh;
  padding: 0;
  .wrapper {
    height: 100vh;
    padding-top: 96px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }
}
.weeronline {
  background: linear-gradient(to bottom right, #FFC35C, #FFD65C);
}
.highstreet h1,
.tikkie-consumer h1 {
  color: white;
}
.highstreet h4,
.tikkie-consumer h4 {
  color: white;
}
.highstreet .arrow,
.tikkie-consumer .arrow {
  color: white;
}
.highstreet {
  background: #1A2025;
}
.tikkie-consumer {
  background: #2E2E5F;
}
.tikkie-business {
  background: #4DB6AC;
}
.landal {
  background: #A7D874;
}
.pon {
  background: #D6DBE3;
}
.pon .wrapper .column img,
.tikkie-business .wrapper .column img {
  max-width: 800px;
}
.pon .wrapper .column .project-image,
.tikkie-business .wrapper .column .project-image {
  width: 140%;
  margin-left: -44%;
  margin-bottom: 50px;
}
.blue-gradient {
  background: linear-gradient(to bottom right, #34ADE3, #89C2DC);
}
.blue-gradient h2,
.blue-gradient p {
  color: white;
}
.weeronline-video {
  text-align: center;
}
.weeronline-video .text-wrapper {
  text-align: left;
}
.weeronline-video .weeronline-video-wrapper {
  margin-top: 100px;
  border-radius: 15px;
  box-shadow: 3px 8px 18px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: inline-flex;
  position: relative;
}
.weeronline-video .weeronline-video-wrapper video {
  margin-top: -2px;
  margin-bottom: -2px;
  border-radius: 0;
  box-shadow: none;
}
.highstreet-lookbook {
  position: relative;
  margin-top: 100px;
}
.highstreet-lookbook .tablet {
  margin: 0;
  width: 83%;
}
.highstreet-lookbook .mobile {
  position: absolute;
  width: 28%;
  right: 0;
  bottom: -10%;
}
@media only screen and (max-width: 700px) {
  .highstreet-lookbook {
    margin-top: 50px;
  }
  .highstreet-lookbook .tablet {
    display: none;
  }
  .highstreet-lookbook .mobile {
    position: static;
    width: 100%;
  }
}
.section-inline-image-devices {
  overflow: hidden;
}
.section-inline-image-devices .highstreet-inline-image-devices {
  max-width: none;
  width: 170%;
  margin-left: -40%;
}
@media only screen and (max-width: 700px) {
  .section-inline-image-devices .highstreet-inline-image-devices {
    width: 250%;
    margin-left: -107%;
  }
}
.cut-off {
  margin-bottom: -268px;
}
@media only screen and (max-width: 700px) {
  .cut-off {
    margin-bottom: 0;
  }
}
@media only screen and (max-width: 700px) {
  .highstreet-image-flow {
    display: none;
  }
}
.tikkie-media .wrapper .columns .column video {
  max-width: 320px;
  width: 100%;
}
.tikkie-business-purple {
  background: #6868C1;
  color: #ffffff;
  padding-bottom: 0;
}
.blue {
  background-color: #5A97CD;
}
.blue h2,
.blue p {
  color: white;
}
.over-mij-wrapper .columns.two.over-mij {
  max-width: 904px;
}
.over-mij-wrapper .columns.two.over-mij img {
  border-radius: 40px;
}
.over-mij-wrapper .columns.two .column {
  width: 49%;
}
@media only screen and (max-width: 700px) {
  .over-mij-wrapper .columns.two .column {
    width: 100%;
  }
}
.over-mij-wrapper .columns.two .column:first-child {
  margin-right: 1%;
}
@media only screen and (max-width: 700px) {
  .over-mij-wrapper .columns.two .column:first-child {
    margin-right: 0;
  }
}
.over-mij-wrapper .columns.two .column:last-child {
  margin-left: 1%;
}
@media only screen and (max-width: 700px) {
  .over-mij-wrapper .columns.two .column:last-child {
    margin-left: 0;
  }
}
.over-mij-wrapper {
  margin-top: 100px;
}
@media only screen and (max-width: 700px) {
  .over-mij-wrapper {
    margin-top: 50px;
  }
}
.over-mij-wrapper .columns + .columns {
  margin-top: 2%;
}
@media only screen and (max-width: 700px) {
  .over-mij-wrapper .columns + .columns {
    margin-top: 50px;
  }
}