@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700&display=swap");

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
main {
  display: block;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}
pre {
  font-family: monospace, monospace;
  font-size: 1em;
}
a {
  background-color: transparent;
}
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
img {
  border-style: none;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
button,
input {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
[type="button"],
[type="reset"],
[type="submit"],
button {
  -webkit-appearance: button;
}
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring,
button:-moz-focusring {
  outline: 1px dotted ButtonText;
}
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}
progress {
  vertical-align: baseline;
}
textarea {
  overflow: auto;
}
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
details {
  display: block;
}
summary {
  display: list-item;
}
template {
  display: none;
}
[hidden] {
  display: none;
}

/* main CSS */
@font-face {
  font-family: "Aristotelica Display Demibold";
  src: url("/font/AristotelicaDisplay-DemiBold.woff") format("woff"),
    url("/font/AristotelicaDisplay-DemiBold.eot") format("eot");
  font-weight: 600;
  font-style: normal;
}

:root {
  --primary-color: #4c4ae4;
  --primary-color-light: #5654f6;
  --primary-color-dark: #3232cd;
  --primary-color-packs: #5a58ff;
  --secondary-color: #3be9de;
  --light-grey: #f7f7f7;
  --dark-grey: #1d1d1b;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

::placeholder {
  color: white;
}

:-ms-input-placeholder {
  color: white;
}

::-ms-input-placeholder {
  color: white;
}

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

body {
  font-size: 14px;
  letter-spacing: 0.4px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

.js .loading {
  transition: 0.7s all;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

textarea {
  resize: vertical;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

/* Page Loader */
html {
  background-color: var(--primary-color);
}

.js:before {
  content: "";
  position: fixed;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  pointer-events: none;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg width='32' height='18' viewBox='0 0 32 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.5857 18C19.9559 18 17.4051 16.9205 15.6169 15.0628C15.0384 14.4603 15.0647 13.5063 15.7221 12.9289C16.3533 12.3766 17.3525 12.4017 17.9574 13.0293C19.1407 14.2594 20.8237 14.9874 22.5857 14.9874C26.0306 14.9874 28.8444 12.3013 28.8444 9.01255C28.8444 5.72385 26.0306 3.03766 22.5857 3.03766C20.9552 3.03766 19.43 3.61506 18.2729 4.69456L10.5416 13.4812C10.2523 13.8326 9.80528 14.0335 9.33194 14.0335C8.85859 14.0335 8.41154 13.8326 8.12227 13.4812L0.364639 4.61925C-0.187599 3.99163 -0.108708 3.03766 0.575016 2.48536C1.23244 1.95816 2.23173 2.03347 2.81027 2.68619L9.35823 10.1423L15.8273 2.76151C15.8799 2.68619 15.9325 2.63598 15.9851 2.58577C17.747 0.92887 20.1137 0 22.5857 0C27.7925 0 32 4.04184 32 8.98745C32 13.9331 27.7662 18 22.5857 18Z' fill='white'/%3E%3C/svg%3E")
    center no-repeat;
  animation: loaderAnim 0.8s ease-out infinite alternate forwards;
  transform: scale(3);
}

.js.home:before {
  display: none;
}

a#design,
a#web,
a#online-ads,
.hero-topics h2,
.hero-right .btn {
  position: relative;
  opacity: 0;
  transform: translateY(90px);
}

.js a#design,
.js a#web,
.js a#online-ads,
.js .hero-topics h2,
.js .hero-right .btn {
  position: relative;
  opacity: 0;
  transform: translateY(90px);
}

.js .hero-topics h2,
.js .hero-right .btn {
  transition: all 300ms ease;
}

body main {
  position: relative;
  transform: translateY(100vh);
}

.js body main {
  opacity: 1;
  position: relative;
  transition: all 1200ms cubic-bezier(0, 0.85, 0.15, 1);
  transform: translateY(0);
}

.js body.load main,
.js body.load footer {
  opacity: 0;
  transform: translateY(100vh);
  transition: all 1200ms cubic-bezier(0, 0.85, 0.15, 1);
}

.no-js video,
.no-js .hero h1 {
  opacity: 1 !important;
}

.no-js video {
  width: 100%;
}

@keyframes loaderAnim {
  to {
    transform: rotate(180deg);
  }
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/* ==========================================================================
   Media Creators - V1
   ========================================================================== */

html,
.workflow h3,
.paper-box h2,
.paper-box h3,
.notice .title,
.members .title,
.service-item h3,
.paper-box-color h3,
.price-packs h2,
.pack-about h3,
.pack-highlight h3,
.pack-about h2,
.price-packs-page .start-project .title,
.price-packs-page .start-project h3,
.packs-slider-section h2,
.complete-packages h2 {
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0;
}

h1,
h2,
h3,
.logo,
.promo span,
.media-text-line a,
.error-404 .title,
.thank-you-page .title {
  font-family: "Aristotelica Display Demibold";
  letter-spacing: 0 !important;
}

header,
.hero-content,
footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.btn {
  display: inline-block;
  margin-bottom: 1.75em;
  transition: all 300ms ease;
}

.btn:hover,
.btn:focus {
  padding-left: 1em;
  padding-right: 1em;
}

.bg-white .btn,
.bg-transparent .btn {
  padding: 12px 54px 12px 18px;
  font-weight: bold;
  letter-spacing: 0;
  border-radius: 36px;
  color: white;
  background: var(--primary-color-packs);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.bg-white .btn:hover,
.bg-white .btn:focus,
.bg-transparent .btn:hover,
.bg-transparent .btn:focus {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.btn-arrow {
  width: fit-content;
  font-size: 0.8em;
  font-weight: bold;
  color: var(--secondary-color) !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.btn-arrow:after {
  content: "";
  display: block;
  float: right;
  width: 22px;
  height: 22px;
  margin-left: 1em;
  border-radius: 50%;
  transition: 300ms ease;
  background-image: url('data:image/svg+xml;utf8,<svg width="18" height="11" viewBox="0 0 18 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.75598 1L8.28671 9.04379C8.68691 9.53671 9.43919 9.53671 9.83939 9.04379L16.3701 1" stroke="%233be9de" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-position: 50% 55%;
  background-repeat: no-repeat;
  background-size: 55%;
  border: 2px solid var(--secondary-color);
  -webkit-animation: scroll-down 2.4s infinite;
  animation: scroll-down 2.4s infinite;
}

.btn-plus {
  display: inline-block;
  margin: 0;
  color: var(--secondary-color);
  font-size: 34px;
  font-weight: bold;
}

input.btn {
  cursor: pointer;
}

.btn-primary,
.btn.btn-primary,
.btn-secondary,
.btn.btn-secondary,
.btn-transparent,
.btn.btn-transparent {
  padding: 10px 40px 10px 20px;
  font-weight: 500;
  line-height: 1.4em;
  letter-spacing: 0;
  border-radius: 26px;
  border: none;
  position: relative;
}

input.btn,
a.nav-item.btn-primary {
  padding-right: 20px !important;
  padding-left: 20px !important;
}

.btn-primary {
  background-color: var(--primary-color-packs);
  box-shadow: 0 8px 14px rgba(50, 50, 205, 0.74);
}

.btn-primary:hover,
.btn-primary:focus,
.btn.btn-primary:hover,
.btn.btn-primary:focus {
  background-color: var(--primary-color-light);
}

.bg-color .btn-primary:hover,
.bg-color .btn-primary:focus,
.bg-color .btn.btn-primary:hover,
.bg-color .btn.btn-primary:focus {
  box-shadow: 0 16px 32px rgba(50, 50, 205, 1);
}

.bg-white .btn-primary {
  box-shadow: 0 8px 14px rgba(50, 50, 205, 0.14);
}

.bg-white .btn-primary:hover,
.bg-white .btn-primary:focus,
.bg-white .btn.btn-primary:hover,
.bg-white .btn.btn-primary:focus {
  box-shadow: 0 16px 32px rgba(50, 50, 205, 0.31);
}

.btn-secondary,
.btn.btn-secondary {
  font-size: 18px;
  font-weight: 500 !important;
  -webkit-text-stroke-width: 0.2px !important;
  color: var(--primary-color-dark) !important;
  background-color: var(--secondary-color);
  box-shadow: 0 0 0 rgba(50, 50, 205, 0.74);
  position: relative;
  overflow: hidden;
}

.btn-primary:hover,
.btn-primary:focus,
.btn.btn-primary:hover,
.btn.btn-primary:focus {
  box-shadow: 0 8px 32px rgba(50, 50, 205, 0.74);
  padding-left: 1.85em;
  padding-right: 1.85em;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn.btn-secondary:hover,
.btn.btn-secondary:focus {
  box-shadow: 0 8px 32px rgba(50, 50, 205, 0.74);
  padding-left: 1.85em;
  padding-right: 1.85em;
}

.btn.btn-primary:after,
.btn.btn-secondary:after,
.btn-transparent:after {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 10px) !important;
  right: 20px;
  transition: 300ms ease;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 90%;
}

.btn-transparent:after {
  width: 14px;
  height: 17px;
}

.btn.btn-primary:after {
  background-image: url("data:image/svg+xml,%3Csvg width='11' height='16' viewBox='0 0 11 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.80078 14.3975L9.80078 7.99746L1.80078 1.59746' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.btn-secondary:after {
  background-image: url("data:image/svg+xml,%3Csvg width='11' height='16' viewBox='0 0 11 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.80078 14.3975L9.80078 7.99746L1.80078 1.59746' stroke='%234c4ae4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.btn-transparent:after {
  background-image: url("data:image/svg+xml,%3Csvg width='11' height='16' viewBox='0 0 11 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.80078 14.3975L9.80078 7.99746L1.80078 1.59746' stroke='%233be9de' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.btn-transparent:hover:after,
.btn-transparent:focus:after,
.price-packs-page .pack.info:hover .btn-transparent:after,
.price-packs-page .pack.info:focus .btn-transparent:after {
  background-image: url("data:image/svg+xml,%3Csvg width='11' height='16' viewBox='0 0 11 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.80078 14.3975L9.80078 7.99746L1.80078 1.59746' stroke='%233232cd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.btn-primary:hover:after,
.btn-primary:focus:after,
.btn.btn-primary:hover:after,
.btn.btn-primary:focus:after {
  transform: translateX(3em);
}

.btn-secondary:hover:after,
.btn-secondary:focus:after,
.btn.btn-secondary:hover:after,
.btn.btn-secondary:focus:after {
  transform: translateX(2em);
  opacity: 0;
}

.the-media .btn-secondary {
  transition: opacity 60ms, transform 300ms ease, padding 300ms ease,
    font-weight 300ms ease, background-color 300ms ease-in,
    box-shadow 300ms ease;
}

.btn-transparent {
  box-shadow: 0 0 0 rgba(50, 50, 205, 0.74);
  border: 1px solid var(--secondary-color) !important;
  color: var(--secondary-color) !important;
  text-shadow: none !important;
}

.btn-transparent:hover,
.btn-transparent:focus,
.price-packs-page .pack.info:hover .btn-transparent,
.price-packs-page .pack.info:focus .btn-transparent {
  text-shadow: 0 0 15px rgba(50, 50, 205, 0.74);
  -webkit-text-stroke: 0.5px var(--primary-color-dark);
  color: var(--primary-color) !important;
  border: 1px solid var(--secondary-color) !important;
  background-color: var(--secondary-color) !important;
  box-shadow: 0 8px 32px rgba(50, 50, 205, 0.74);
}

.play-video svg {
  fill: #fff;
}

section.bg-color {
  color: white;
  background-color: var(--primary-color);
}

section.bg-color .btn {
  color: white;
}

section.bg-color-light {
  color: white;
  background-color: var(--primary-color-light);
}

section.bg-color-light .btn {
  color: white;
}

section.bg-white {
  color: var(--primary-color);
  background-color: var(--light-grey);
}

section.bg-transparent {
  color: var(--primary-color);
  background: transparent;
}

section.has-shadow-top {
  box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.2);
}

section.has-shadow-bottom {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

div.fake {
  z-index: -1;
}

h2,
.error-404 .title,
.thank-you-page .title {
  font-size: 64px;
  line-height: 64px;
}

.error-404 .title,
.thank-you-page .title {
  margin-bottom: 0;
}

p {
  margin-bottom: 1.75em;
  line-height: 26px;
}

img {
  max-width: 100%;
}

header {
  width: 100%;
  position: fixed;
  z-index: 3;
  align-items: flex-end;
  box-shadow: 0 0 0 var(--primary-color-dark);
}

header.slideUp {
  -webkit-transform: translateY(-114px);
  transform: translateY(-114px);
  transition: transform 0.2s ease-out, box-shadow 0.1s ease-in;
  box-shadow: 0 -60px 60px var(--primary-color-dark);
  background-color: var(--primary-color);
}

header.slideDown {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
  background-color: var(--primary-color);
  box-shadow: 0 5px 41px rgba(50, 50, 205, 0.74);
}

header.is-transparent {
  background-color: transparent !important;
  box-shadow: 0 0 0 rgba(50, 50, 205, 0.74) !important;
  transition: transform 0.2s ease-out, height 0.6s ease-out,
    background-color 0.6s ease-in, box-shadow 0.6s ease-in;
}

header .logo {
  margin: 0 0 0 16px;
  padding: 48px 16px 32px;
  font-size: 34px;
  line-height: 34px;
  text-transform: lowercase;
  width: 380px;
  white-space: nowrap;
}

header .logo {
  text-align: left;
  color: white;
  padding-left: 4%;
}

header nav {
  padding-right: 4%;
  width: 100%;
  height: 46px;
  text-align: right;
}

#menu-toggle input {
  display: none;
}

header nav ul {
  margin-top: -1.25em;
}

header nav li {
  display: inline-block;
  margin-right: 1.5em;
  line-height: 2em;
}

header nav li:last-child {
  margin-right: 0;
}

header nav a {
  padding: 22px 0;
  color: white;
  font-size: 13px;
  letter-spacing: 0;
  font-weight: 300;
  text-transform: uppercase;
  transition: all 300ms ease;
}

a.nav-item:not(.btn-primary):not(.lang-switcher):after,
.lang-switcher-dropdown a:after {
  display: block;
  content: "";
  border-bottom: solid 3px white;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 250ms ease;
}

a.nav-item:not(.btn-primary):not(.lang-switcher):hover:after,
a.nav-item:not(.btn-primary):not(.lang-switcher):focus:after,
.lang-switcher-dropdown a:hover:after,
.lang-switcher-dropdown a:focus:after {
  transform: scaleX(1);
  transform-origin: left;
}

header nav li a.active {
  font-weight: bold;
}

header nav li .btn {
  margin-bottom: 0;
}

header nav li .lang-switcher {
  cursor: pointer;
}

header nav li .btn-primary {
  font-weight: 500;
  -webkit-text-stroke: 0.2px var(--primary-color-dark);
  color: var(--primary-color-dark);
  background-color: var(--secondary-color);
}

header nav li .lang-switcher:after {
  border-style: solid;
  border-width: 12px 9px 0 9px;
  border-radius: 4px;
  border-color: #ffffff transparent transparent transparent;
  content: "";
  display: inline-block;
  margin-left: 8px;
  transition: all 300ms;
}

.lang-switcher-dropdown {
  display: none;
  position: absolute;
  overflow: auto;
  z-index: 1;
  transform: translateX(-4px) translateY(-8px);
  margin-top: 23px;
}

header.slideDown .lang-switcher-dropdown {
  background: var(--primary-color-packs);
  padding: 12px 6px 6px;
  border-radius: 38px;
}

header.is-transparent h1 {
  font-size: 34px;
}

header.is-transparent .lang-switcher-dropdown {
  background: transparent !important;
  padding: 0 !important;
}

header.is-transparent h1,
header.is-transparent nav ul {
  transition: all 0.3s ease-out;
}

.lang-switcher-dropdown a {
  display: block;
  margin-top: 0;
  padding: 6px;
  color: white;
  line-height: 2em;
  text-decoration: none;
}

.show {
  display: block;
}

section {
  padding: 6em 3em;
}

.showreel-preview video {
  width: 100%;
  max-width: 100%;
  box-shadow: 0px 0px 120px rgb(50, 50, 205);
}

.home-content h2 {
  text-align: right;
}

.home-content .title {
  font-weight: bold;
  letter-spacing: 0;
}

.home-content .title,
.home .price-packs h2,
.pack-price,
footer h4 {
  font-weight: 700;
}

.hero h1 a {
  display: block;
  color: white;
  text-decoration: underline;
  transition: all 300ms ease;
  -webkit-text-stroke: 2px transparent;
}

.hero h1 a:hover,
.hero h1 a:focus {
  color: var(--primary-color);
  text-decoration-color: var(--secondary-color);
  -webkit-text-stroke: 2px var(--secondary-color);
}

.home .hero-text {
  font-weight: 300;
  margin-bottom: 0;
}

.page-header {
  display: grid;
  grid-template-columns: 2fr 3fr;
  grid-gap: 13%;
}

.page-header h3 a {
  color: white;
  text-decoration: underline;
  font-size: 2em;
}

.page-header h3:last-of-type {
  margin-bottom: 2em;
}

.the-media-page .page-header {
  padding-bottom: 8em;
}

@supports (position: sticky) {
  .is-sticky {
    position: sticky;
    top: 0;
  }
}

#step-by-step {
  outline: none;
}

.page-header .title {
  width: 100%;
}

.page-header .hero-text {
  width: 100%;
}

.page-header .btn-arrow {
  display: inline-block;
}

.workflow .slider,
.tns-carousel {
  cursor: url(/img/drag.svg), url(/img/drag.cur), grab;
}

.workflow .slider:active,
.tns-carousel:active {
  cursor: url(/img/drag-active.svg), url(/img/drag-active.cur), grabbing;
}

html[lang="pt"] .workflow .slider,
html[lang="pt"] .tns-carousel {
  cursor: url(/img/arraste.svg), url(/img/arraste.cur), grab;
}

html[lang="pt"] .workflow .slider:active,
html[lang="pt"] .tns-carousel:active {
  cursor: url(/img/arraste-active.svg), url(/img/arraste-active.cur), grabbing;
}

html[lang="nl"] .workflow .slider,
html[lang="nl"] .tns-carousel {
  cursor: url(/img/sleep.svg), url(/img/sleep.cur), grab;
}

html[lang="nl"] .workflow .slider:active,
html[lang="nl"] .tns-carousel:active {
  cursor: url(/img/sleep-active.svg), url(/img/sleep-active.cur), grabbing;
}

.workflow h2 {
  color: transparent;
  -webkit-text-stroke: 1px white;
  width: min-content;
}

.home .workflow h2 {
  width: 100%;
}

.workflow h2.is-sticky {
  top: 34%;
  margin-bottom: 4em;
  float: left;
  padding-top: 8px;
  overflow: hidden;
}

.workflow h2.is-sticky .scroll {
  height: 3px;
  background: var(--secondary-color);
  display: block;
  border-radius: 2px;
  transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hide-mobile .workflow .hero-text {
  margin-top: 3em;
}

.home .workflow h2 {
  color: white;
  -webkit-text-stroke: 0 !important;
}

.home .workflow h2 {
  margin-bottom: -2.4em;
}

.home .workflow.show-mobile h2 {
  margin-bottom: -1.7em;
}

.workflow .btn {
  transform: translateY(-1em);
}

.home .slider__item:first-of-type {
  flex: 0 0 0;
}

.workflow h3 {
  float: left;
  margin-right: 1em;
  font-size: 1.4em;
}

.workflow h3 span {
  font-size: 4.6em;
}

.workflow-top {
  position: absolute;
  margin-left: 7em;
}

.slider {
  position: absolute;
  top: 10vw;
  left: 0;
}

.slider__items {
  display: flex;
  will-change: transform;
}

.slider__item {
  width: 32vw;
  flex: 0 0 32vw;
}

.slider__item:not(:first-of-type) {
  margin-left: 8vw;
}

.slider__item:nth-child(even) {
  margin-top: 6vw;
}

.cursor-holder {
  position: relative;
  top: -2462px;
  left: 27px;
}

.cursor {
  pointer-events: none;
  position: absolute;
  z-index: 10000;
  top: -10vw;
  left: 4px;
  height: 7vw;
  width: 7vw;
  border: 2px solid var(--secondary-color);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s ease-out;
  will-change: transform;
}

@media (hover: none) {
  .cursor {
    display: none;
  }
}

.cursor.is-visible {
  opacity: 1;
}

.cursor.is-pressed {
  transform: scale(0.5);
  background: var(--secondary-color);
}

.workflow-item img {
  width: 100%;
}

.workflow-item-text {
  position: relative;
  z-index: 1;
}

.slider__items .workflow-item-text {
  margin: -3.2em 2em 0 2em;
}

.mobile-slider .workflow-item-text {
  margin: -3.2em 1em 0 1em;
}

.workflow-item-text .flex-bottom {
  display: flex;
  justify-content: stretch;
  align-items: flex-end;
}

.workflow-item-text h4 {
  padding-bottom: 2.5vh;
}

.approach-page .workflow-image {
  height: 42vh;
}

.approach-page .workflow-item-text {
  margin-top: -6vh;
  padding-right: 2em;
  padding-left: 2em;
}

.approach-page .workflow-item-text h4 {
  padding-top: 3.4em;
}

.approach-page .workflow-item-text p {
  margin-top: 1em;
  font-size: 1.4em;
}

.slider__items .workflow-item-text h4 {
  padding-top: 3.2em;
  padding-bottom: 0;
}

.workflow-image {
  display: block;
  width: 100%;
  height: 18vw;
  text-align: center;
  transition: all 1000ms cubic-bezier(0, 0.85, 0.15, 1);
  position: relative;
}

.workflow-item-text {
  transition: all 900ms cubic-bezier(0, 1.04, 1, 1);
}

.workflow-numbers {
  color: transparent;
  -webkit-text-stroke: 1px white;
  transition: all 600ms cubic-bezier(0, 1.04, 1, 1);
}

.workflow-item:hover .workflow-numbers {
  color: white;
  -webkit-text-stroke: 1px white;
}

.hide-mobile .workflow-item-text .text {
  opacity: 0;
  transform: translateY(-180px);
  transition: all 600ms cubic-bezier(0, 1.04, 1, 1);
}

.workflow-item .workflow-item-text {
  transform: translateY(-10px);
}

.workflow-item:hover .workflow-item-text {
  transform: translateY(40px);
}

.slider__items .workflow-item:hover .workflow-numbers {
  /* margin-bottom: -0.5em; */
  opacity: 1;
}

.slider__items .workflow-item:hover .text {
  opacity: 1;
  transform: translateY(-20px);
}

.btn-plus {
  float: right;
}

.price-packs .home-content h2,
.price-packs .home-left {
  text-align: left;
}

.price-packs .pack {
  transform-style: preserve-3d;
  padding: 3em 2em 2em 3.6em;
  color: white;
  background-color: var(--primary-color);
  transition: background-color 900ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* fix SVG bubble z-index */
.price-packs-content {
  transform: translateZ(400px);
}

.promo {
  margin: auto;
  text-align: center;
  background: #ff3293;
  border-radius: 30px;
  padding: 0.25rem 0.7rem 0.25rem 1rem;
  -webkit-text-stroke-width: 0.25px;
  position: relative;
}

.promo span {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 2px !important;
  color: white !important;
}

.price-packs .pack .promo {
  padding: 0.45rem 0.7rem 0.25rem 1rem;
  top: -59px;
  width: auto;
  margin-bottom: -30px;
}

.price-packs .pack .promo span {
  font-size: 16px !important;
  letter-spacing: 2px !important;
}

.price-packs-page .promo {
  top: -48px;
  width: 202px;
  letter-spacing: 1.5px !important;
  position: relative;
}

.price-packs-page .promo span {
  position: relative;
  font-size: 14px !important;
  letter-spacing: 1px !important;
}

.pack-header .promo {
  cursor: pointer;
}

.packs-slider .promo {
  margin-top: -8px;
  margin-bottom: -19px;
}

.packs-slider-section .tns-ovh,
.packs-slider {
  overflow-y: visible;
}

.packs-slider-section h2 {
  margin-bottom: 0 !important;
}
.packs-slider {
  padding: 67px 0;
}

.message {
  background-color: var(--primary-color-dark);
  color: white;
  padding: 14rem 3rem;
  text-align: center;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0;
  position: fixed;
  top: 0;
  z-index: 10;
  transform: translate3d(0, -100%, 0);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 1200ms cubic-bezier(0, 0.85, 0.15, 1);
  will-change: scroll-position;
}

.message p {
  font-size: 17px;
  line-height: 25px;
  margin: -2rem auto 2rem;
}

.message a.close {
  position: absolute;
  top: 30px;
  right: 30px;
  font-size: 150%;
}

.message .btn {
  width: 70%;
  margin: 0 auto;
  font-weight: bold !important;
  cursor: pointer;
}

@media all and (min-width: 35em) and (min-width: 45em) {
  .pack-header .promo {
    position: absolute;
    top: 14px;
    bottom: -27.5vw;
  }
}

@media all and (min-width: 52em) {
  .message {
    padding: 14rem 28%;
  }
  .message .btn {
    width: 50%;
  }
  .price-packs .pack .promo {
    top: -62px;
  }
  .pack-header {
    position: relative;
  }
  .pack-header .promo {
    position: absolute;
    height: 3vw;
    bottom: -14.5vw;
    right: 0;
    right: calc(50% - 11vw) !important;
    width: 22vw;
  }
  .pack-header .promo span {
    position: absolute;
    top: 1vw;
    left: 0;
    letter-spacing: 1px !important;
    -webkit-text-stroke: 0.1px !important;
    width: 22vw;
    font-size: 1.6vw !important;
  }
}

@media all and (min-width: 45em) and (max-width: 52em) {
  .pack-header {
    flex-direction: column !important;
  }
  .pack-header .promo {
    position: absolute;
    height: 2.8vw;
    top: 36vw !important;
    right: calc(50% - 11vw) !important;
    width: 22vw;
  }
  .pack-header .promo span {
    position: absolute;
    top: 1vw;
    left: 0;
    letter-spacing: 1px !important;
    -webkit-text-stroke: 0.1px !important;
    width: 22vw;
    font-size: 1.5vw !important;
  }
  .price-packs-page .promo {
    position: absolute;
    top: -28px !important;
  }
}

@media all and (min-width: 52em) {
  .price-packs .pack .promo {
    top: -52px;
  }
  .price-packs .pack .promo span {
    font-size: 14px !important;
    letter-spacing: 1.25px !important;
    top: -1px;
  }
}

@media all and (min-width: 62em) {
  .message {
    padding: 14rem 28%;
  }
  .message .btn {
    width: 50%;
  }
  .price-packs .pack .promo {
    top: -62px;
  }
  .pack-header {
    position: relative;
  }
  .pack-header .promo {
    position: absolute;
    height: 1.8vw;
    bottom: -10vw !important;
    right: 0 !important;
    width: 13vw;
  }
  .pack-header .promo span {
    position: absolute;
    top: 0.65vw;
    left: 0;
    letter-spacing: 1px !important;
    -webkit-text-stroke: 0.1px !important;
    width: 13vw;
    font-size: 0.85vw !important;
  }
}

@media all and (min-width: 72em) {
  .message {
    padding: 14rem 35%;
  }
  .message .btn {
    width: 50%;
  }
  .price-packs .pack .promo {
    top: -62px;
  }
  .pack-header .promo {
    bottom: -10vw;
  }
}

@media all and (min-width: 96em) {
  .message {
    padding: 14rem 36.9%;
  }
  .message .btn {
    width: 50%;
  }
  .price-packs .pack .promo {
    top: -4vw;
  }
  .price-packs .pack .promo span {
    font-size: 15px !important;
    letter-spacing: 2px !important;
    top: -1px;
  }
  .packs-slider .promo {
    margin-top: -22px;
    margin-bottom: -5px;
  }
}

@media all and (min-width: 112em) {
  .packs-slider .promo {
    margin-top: -28px;
    margin-bottom: 1px;
  }
}

@media all and (orientation: portrait) and (device-width: 768px) {
  .pack-header .promo {
    position: absolute;
    height: 2.8vw;
    bottom: unset;
    top: 36vw !important;
    right: calc(50% - 11vw) !important;
    width: 22vw;
  }
  .pack-header .promo span {
    position: absolute;
    top: 1vw;
    left: 0;
    letter-spacing: 1px !important;
    -webkit-text-stroke: 0.1px !important;
    width: 22vw;
    font-size: 1.5vw !important;
  }
  .price-packs-page .pack .promo {
    position: absolute;
    top: -18px !important;
  }
  .packs-slider .pack .promo {
    top: 0 !important;
  }
  .message {
    padding-left: 24%;
    padding-right: 24%;
  }
}

@media all and (orientation: portrait) and (device-width: 1024px) {
  .pack-header .promo:before {
    content: "";
    height: 50px;
    display: block;
  }
  .pack-header .promo {
    position: absolute;
    height: 2.6vw;
    bottom: -180px !important;
    right: calc(50% - 11vw) !important;
    width: 22vw;
  }
  .pack-header .promo span {
    width: 22vw;
    font-size: 1.6vw !important;
  }
  .price-packs-page .pack .promo {
    margin-top: -18px !important;
  }
}

.price-packs .pack,
.packs-slider .pack {
  border-radius: 1.25vw !important;
}

.packs-slider .pack {
  position: absolute;
  z-index: 2;
}

.pack-link {
  color: white;
}

.packs-slider .pack,
.price-packs-page .packs-slider .pack {
  background-color: var(--primary-color);
}

.packs-slider {
  display: flex;
  -webkit-user-select: none;
  user-select: none;
}

.packs-slider .pack {
  flex: 1;
  height: 100%;
  padding: 3vw;
  position: relative;
  transition: 300ms ease;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.25);
}

.packs-slider .pack:hover,
.packs-slider .pack:focus {
  background-color: var(--primary-color-packs);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.25);
}

.packs-slider .pack .pack-features li {
  line-height: 2.2em;
}

.packs-slider .pack .pack-features li:before {
  width: 14px;
  margin-right: 0.25em;
}

.packs-slider .pack .btn-plus {
  position: absolute;
  right: 0;
  bottom: -1vw;
}

.price-packs .pack.active:before,
.price-packs .pack.inactive:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  border-radius: 5vw !important;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.25);
}

.price-packs .pack.active {
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.25);
}

.pack.active .btn-plus {
  margin-top: -0.5em;
  margin-right: -0.25em;
}

.price-packs-page .price-packs {
  overflow: hidden;
}

.price-packs-page .pack.info {
  border: 3px solid var(--primary-color-packs) !important;
  background: transparent;
  /* animation: none!important; */
  /* backdrop-filter: blur(37px); */
  background: rgba(76, 74, 228, 0.5) !important;
  height: 100%;
}

.price-packs-page .pack.info p {
  margin-top: 3.75vw;
  margin-bottom: 3.75vw;
}

.price-packs-content {
  position: relative;
}

.price-packs-page .price-packs .pack {
  transition: all 300ms ease-out, transform 0;
}

.price-packs-page .price-packs .pack:hover,
.price-packs-page .price-packs .pack:focus {
  box-shadow: 0 0 30px 0px var(--primary-color-dark),
    0 0 120px 0px var(--primary-color-dark);
  transform: translateY(-3px);
}

.home .price-packs .pack {
  position: relative;
}

.home .price-packs .pack.active .btn-plus {
  position: absolute;
  bottom: 0.5em;
  right: 0.5em;
}

.price-packs .pack.active {
  background-color: var(--primary-color-packs);
}

.price-packs .pack.active .pack-title a {
  display: none;
}

.price-packs .pack.inactive {
  grid-column: span 1;
  text-align: left;
  cursor: pointer;
}

.home .price-packs .pack {
  margin-right: 8px;
  margin-bottom: 8px;
  float: left;
}

.price-packs .pack.inactive .pack-content {
  display: none;
}

.price-packs .pack.inactive .btn-plus {
  float: right;
  font-size: 32px;
}

.pack-title {
  font-family: "Montserrat", sans-serif;
  font-size: 1.4em;
  font-weight: 700;
  text-transform: uppercase;
}

.pack-price {
  display: block;
  margin: 0.4em 0;
  font-size: 4em;
  font-weight: bold;
}

.pack-price small {
  font-size: 13px;
  line-height: 13px;
}

.pack-features {
  margin-bottom: 4vh;
}

.pack-features li:before,
.pack-details li:before {
  font-family: "Montserrat", sans-serif;
  content: "";
  margin-right: 0.4em;
  width: 16px;
  height: 16px;
  display: inline-block;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 6L4 10L9.5 1' stroke='%233be9de' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center no-repeat;
  background-size: contain;
  vertical-align: text-bottom;
}

.btn-plus {
  font-size: 3vw;
  padding: 2vw;
  border-radius: 50%;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  z-index: 1;
}

.pack:hover .btn-plus,
.pack:focus .btn-plus {
  transform: rotate(180deg);
}

.home .btn-plus {
  padding: 0;
}

.home .active .btn-plus {
  margin-right: 1vh;
}

.pack .more-info {
  float: right;
  margin-right: 2em;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--secondary-color);
  transform: translateX(-8vw);
  opacity: 0;
  transition: all 300ms ease;
  position: absolute;
  bottom: 2.5vw;
  right: 3.5vw;
}

.pack:hover .more-info,
.pack:focus .more-info {
  transform: translateX(0);
  opacity: 1;
}

.start-project .home-content {
  display: block;
}

.start-project .title,
.start-project p {
  text-align: center;
}

.start-project p {
  width: 90%;
  margin: auto;
}

.start-project form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 2%;
  margin-top: 4em;
}

.start-project form input:not(.btn),
.start-project form select,
.start-project form textarea {
  display: block;
  width: 100%;
  margin-bottom: 1.5em;
  padding: 1.5em 1.5em 1.7em;
  color: white;
  font-size: 14px;
  font-weight: 300;
  background-color: transparent;
  border: 1px solid white;
  transition: background-color 200ms ease;
}

.start-project form input:not(.btn):focus,
.start-project form select:focus,
.start-project form textarea:focus {
  outline: none;
  background-color: var(--primary-color-dark);
}

.start-project form input[type="date"] {
  padding: 1.4em 1.5em 1.65em !important;
}

.start-project form input[type="date"]::-webkit-inner-spin-button,
.start-project form input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

.start-project form input:disabled {
  opacity: 0.5;
}

.start-project form select option {
  font-size: 18px;
  background-color: var(--primary-color-dark);
}

.start-project form textarea {
  height: 8em;
}

.start-project form .btn {
  margin-top: 2.5em;
}

.start-project form .select {
  position: relative;
  display: block;
}

.start-project form .select:after {
  content: "";
  position: absolute;
  right: 20px;
  top: calc(50% - 7px);
  z-index: 1;
  width: 16px;
  height: 14px;
  pointer-events: none;
  background: transparent
    url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxNiAxMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMS44NDE3MSAxTDcuNTUyNDYgOC44ODIyN0M3Ljk1MTcxIDkuNDMzMzMgOC43NzI4MSA5LjQzMzMzIDkuMTcyMDYgOC44ODIyN0wxNC44ODI4IDEiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+)
    center no-repeat;
  background-size: 90%;
}

.start-project form .select-field {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.start-project form .select-field::-ms-expand {
  display: none;
}

footer {
  padding: 6em 6em 4em;
  letter-spacing: 0;
  background-color: var(--light-grey);
  position: relative;
}

footer .logo {
  font-size: 2em;
  line-height: 1em;
  color: var(--primary-color);
}

footer h4 {
  margin-top: 4em;
  color: var(--primary-color);
  font-size: 1.2em;
}

footer h4 * {
  display: block;
}

footer .logo {
  display: block;
  width: min-content;
}

footer .btn {
  display: inline-block;
  margin-bottom: 1.75em;
  text-transform: none;
  font-size: 1em;
  font-weight: bold;
  line-height: auto;
  transition: all 300ms ease;
  color: var(--primary-color);
  border-bottom: 6px solid var(--secondary-color);
}

footer .btn:hover,
footer .btn:focus {
  padding-left: 1em;
  padding-right: 1em;
  color: var(--primary-color) !important;
  background: var(--secondary-color);
}

.footer-right {
  display: flex;
  flex-direction: column;
  font-size: 1.1em;
}

.footer-right ul li {
  padding: 0.2em;
  font-weight: 500;
  color: var(--primary-color);
}

.footer-right a {
  color: var(--primary-color);
  display: inline-block;
  margin-bottom: -3px;
  transition: all 300ms ease;
}

.footer-right a:hover,
.footer-right a:focus {
  -webkit-text-stroke: 0.4px;
}

.footer-right .footer-top {
  display: flex;
  flex-direction: row;
  margin-bottom: 1vw;
}

.footer-right .footer-top ul {
  margin-left: 5.75vw;
}

.footer-right .footer-bottom {
  display: flex;
  justify-content: flex-end;
}

.footer-right .footer-bottom ul li {
  display: inline-block;
  margin-left: 2.4em;
  margin-top: 4em;
}

form .btn {
  border-top: none;
  border-right: none;
  border-left: none;
  background-color: transparent;
}

.text-vertical {
  display: block;
  text-align: center;
  writing-mode: vertical-rl;
  line-height: 2rem;
  transform: rotate(180deg);
}

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

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

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

.media-text-line {
  overflow-x: hidden;
  margin-top: 0.5em;
}

.media-text-line a {
  display: inline-block;
  margin-right: 0.2em;
  padding: 0;
  font-size: 7.4em;
  line-height: 1em;
  white-space: nowrap;
  color: white;
}

a.media-text-line-title {
  color: var(--primary-color);
  -webkit-text-stroke: 2px white;
}

.media-text-line p {
  margin: 0;
  white-space: nowrap;
  padding: 0;
}

.marquee {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
}

.marquee .inner {
  position: relative;
  width: 100%;
  display: flex;
  color: white;
  height: 7.4em;
}

.marquee .inner > * {
  white-space: nowrap;
  padding: 0;
}

section.media-scroll {
  padding: 0;
  padding-top: 13vh;
  padding-bottom: 10vh;
}

.icons {
  max-width: 70em;
  margin: auto;
  text-align: center;
}

.icon {
  display: inline-block;
  text-align: center;
  margin: 3em;
}

.icons-page .icon {
  width: 10em;
}

.asterisk {
  color: var(--secondary-color);
}

.the-creators {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  grid-gap: 6em;
  padding: 12em 6em;
}

.member-bio {
  color: white;
}

.member-bio p.text {
  -webkit-text-stroke-width: 0;
  font-weight: 300;
}

.creators-social-links {
  display: flex;
  margin-top: 6em;
}

.creators-social-links li {
  margin-right: 2em;
}

.creators-social-links a {
  display: block;
  width: 24px;
  height: 24px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.icon-website {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyNCAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIyLjQ1NTEgNi42MDc3MUwyMi4zNDA2IDYuMzk2MTJDMjAuMjYyNSAyLjU3NjU2IDE2LjM4NyAwIDExLjk1NTEgMEM3LjUyMjk1IDAgMy42NDc0NiAyLjU3NjU2IDEuNTY5NTggNi4zOTYxMkwxLjQ1NTA4IDYuNjA3NzFDMC42NTM1NjQgOC4xNDgxOCAwLjE0MzU1NSA5Ljg4MjU0IDAgMTEuNzI2MlYxMy44NTgzQzAuMTQzNTU1IDE1LjcwMTkgMC42NTM1NjQgMTcuNDM2MyAxLjQ1NTA4IDE4Ljk3NjJMMS41Njk1OCAxOS4xODg0QzMuNjQ3NDYgMjMuMDA3OSA3LjUyMjk1IDI1LjU4NDUgMTEuOTU1MSAyNS41ODQ1QzE2LjM4NyAyNS41ODQ1IDIwLjI2MjUgMjMuMDA3OSAyMi4zNDA2IDE5LjE4ODRMMjIuNDU1MSAxOC45NzYyQzIzLjI1NjYgMTcuNDM1OCAyMy43NjY2IDE1LjcwMTkgMjMuOTA5OSAxMy44NTgzVjExLjcyNjJDMjMuNzY2NiA5Ljg4MjU0IDIzLjI1NjYgOC4xNDgxOCAyMi40NTUxIDYuNjA3NzFaTTE3LjkzNDYgMTEuNzI2MkMxNy44OTUgMTAuNjA2MyAxNy43OTM5IDkuNTM1NjIgMTcuNjM3IDguNTI4MTZIMjEuMTE0QzIxLjUyMzkgOS41MjQ5NSAyMS43OTg2IDEwLjU5ODggMjEuOTA0MSAxMS43MjYySDE3LjkzNDZaTTExLjk1NTEgMjMuNDUyNEMxMC44MjQ1IDIzLjQ1MjQgOS42MTY5NCAyMS44MTAyIDguODI3MzkgMTkuMTg4NEgxNS4wODNDMTQuMjkzIDIxLjgxMDIgMTMuMDg1NCAyMy40NTI0IDExLjk1NTEgMjMuNDUyNFpNOC4zMTk1OCAxNy4wNTYzQzguMTQzNTUgMTYuMDY4NiA4LjAyNDQxIDE0Ljk5NTEgNy45NzgwMyAxMy44NTgzSDE1LjkzMTlDMTUuODg1NSAxNC45OTUxIDE1Ljc2NjYgMTYuMDY4NiAxNS41OTA2IDE3LjA1NjNIOC4zMTk1OFpNNy45NzgwMyAxMS43MjYyQzguMDI0NDEgMTAuNTg5NCA4LjE0MzU1IDkuNTE1ODQgOC4zMTk1OCA4LjUyODE2SDE1LjU5MDZDMTUuNzY2NiA5LjUxNTg0IDE1Ljg4NTUgMTAuNTg5NCAxNS45MzE5IDExLjcyNjJINy45NzgwM1pNMTEuOTU1MSAyLjEzMjA0QzEzLjA4NTQgMi4xMzIwNCAxNC4yOTMgMy43NzQ3OSAxNS4wODI1IDYuMzk2MTJIOC44MjczOUM5LjYxNjk0IDMuNzc0NzkgMTAuODI0NSAyLjEzMjA0IDExLjk1NTEgMi4xMzIwNFpNMTkuOTM2IDYuMzk2MTJIMTcuMjAwNEMxNi44NjMgNS4wOTU2MSAxNi40MjI2IDMuOTQ5NjkgMTUuODk4OSAyLjk5OTIyQzE3LjUwODUgMy43MzkxNCAxOC44OTM2IDQuOTIxNzUgMTkuOTM2IDYuMzk2MTJaTTguMDExNDcgMi45OTkyMkM3LjQ4NzU1IDMuOTQ5NjkgNy4wNDcxMiA1LjA5NTYxIDYuNzA5NDcgNi4zOTYxMkgzLjk3NDEyQzUuMDE2NiA0LjkyMTc1IDYuNDAxNjEgMy43MzkxNCA4LjAxMTQ3IDIuOTk5MjJaTTIuNzk1OSA4LjUyODE2SDYuMjcyOTVDNi4xMTY0NiA5LjUzNTYyIDYuMDE0ODkgMTAuNjA2MyA1Ljk3NTU5IDExLjcyNjJIMi4wMDU2MkMyLjExMTA4IDEwLjU5ODggMi4zODU1IDkuNTI0OTUgMi43OTU5IDguNTI4MTZaTTUuOTc1NTkgMTMuODU4M0M2LjAxNDg5IDE0Ljk3ODEgNi4xMTU5NyAxNi4wNDg5IDYuMjcyOTUgMTcuMDU2M0gyLjc5NTlDMi4zODU5OSAxNi4wNTk1IDIuMTExNTcgMTQuOTg1NyAyLjAwNjEgMTMuODU4M0g1Ljk3NTU5Wk0zLjk3NDEyIDE5LjE4ODRINi43MDk0N0M3LjA0NzEyIDIwLjQ4ODkgNy40ODc1NSAyMS42MzQ4IDguMDEwOTkgMjIuNTg1M0M2LjQwMTYxIDIxLjg0NTMgNS4wMTY2IDIwLjY2MjcgMy45NzQxMiAxOS4xODg0Wk0xNS44OTg0IDIyLjU4NTNDMTYuNDIyNiAyMS42MzQ4IDE2Ljg2MyAyMC40ODg5IDE3LjIgMTkuMTg4NEgxOS45MzU1QzE4Ljg5MzYgMjAuNjYyNyAxNy41MDg1IDIxLjg0NTMgMTUuODk4NCAyMi41ODUzWk0yMS4xMTQ1IDE3LjA1NjNIMTcuNjM3NUMxNy43OTM5IDE2LjA0ODkgMTcuODk1NSAxNC45NzgxIDE3LjkzNTEgMTMuODU4M0gyMS45MDVDMjEuNzk5MSAxNC45ODU3IDIxLjUyNDQgMTYuMDU5NSAyMS4xMTQ1IDE3LjA1NjNaIiBmaWxsPSIjNEM0QUU0Ii8+Cjwvc3ZnPgo=");
}
.icon-instagram {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyNSAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjE0NjggMjUuNTg0NUMxMy4wNjc0IDI1LjU4NDUgMTIuOTg3OSAyNS41ODQ1IDEyLjkwNzkgMjUuNTg0MUMxMS4wMjY2IDI1LjU4OSA5LjI4ODI4IDI1LjUzOCA3LjU5Nzc5IDI1LjQyODNDNi4wNDc5MyAyNS4zMjc4IDQuNjMzMiAyNC43NTY4IDMuNTA2MzIgMjMuNzc3NEMyLjQxOSAyMi44MzIyIDEuNjc2NDggMjEuNTU0MyAxLjI5OTQ1IDE5Ljk3OTVDMC45NzEzMTYgMTguNjA4NCAwLjk1MzkyIDE3LjI2MjUgMC45MzcyNTcgMTUuOTYwOEMwLjkyNTE3MSAxNS4wMjY4IDAuOTEyNzIgMTMuOTIgMC45MTAxNTYgMTIuNzk0NUMwLjkxMjcyIDExLjY2NDQgMC45MjUxNzEgMTAuNTU3NiAwLjkzNzI1NyA5LjYyMzYxQzAuOTUzOTIgOC4zMjIwNSAwLjk3MTMxNiA2Ljk3NjE4IDEuMjk5NDUgNS42MDQ5NEMxLjY3NjQ4IDQuMDMwMTEgMi40MTkgMi43NTIxNyAzLjUwNjMyIDEuODA3MDRDNC42MzMyIDAuODI3NTUzIDYuMDQ3OTMgMC4yNTY2MDkgNy41OTc5NyAwLjE1NjA4NEM5LjI4ODQ3IDAuMDQ2NTc5NyAxMS4wMjcxIC0wLjAwNDU2MTI1IDEyLjkxMjQgMC4wMDAzMTg2MTNDMTQuNzk0MyAtMC4wMDM5NzU2NyAxNi41MzIgMC4wNDY1Nzk3IDE4LjIyMjUgMC4xNTYwODRDMTkuNzcyNCAwLjI1NjYwOSAyMS4xODcxIDAuODI3NTUzIDIyLjMxNCAxLjgwNzA0QzIzLjQwMTUgMi43NTIxNyAyNC4xNDM4IDQuMDMwMTEgMjQuNTIwOSA1LjYwNDk0QzI0Ljg0OSA2Ljk3NTk5IDI0Ljg2NjQgOC4zMjIwNSAyNC44ODMxIDkuNjIzNjFDMjQuODk1MSAxMC41NTc2IDI0LjkwNzggMTEuNjY0NCAyNC45MTAyIDEyLjc4OTlWMTIuNzk0NUMyNC45MDc4IDEzLjkyIDI0Ljg5NTEgMTUuMDI2OCAyNC44ODMxIDE1Ljk2MDhDMjQuODY2NCAxNy4yNjI0IDI0Ljg0OTIgMTguNjA4MiAyNC41MjA5IDE5Ljk3OTVDMjQuMTQzOCAyMS41NTQzIDIzLjQwMTUgMjIuODMyMiAyMi4zMTQgMjMuNzc3NEMyMS4xODcxIDI0Ljc1NjggMTkuNzcyNCAyNS4zMjc4IDE4LjIyMjUgMjUuNDI4M0MxNi42MDM2IDI1LjUzMzMgMTQuOTQwNiAyNS41ODQ1IDEzLjE0NjggMjUuNTg0NVpNMTIuOTA3OSAyMy41ODUzQzE0Ljc1ODYgMjMuNTkgMTYuNDU3OSAyMy41NDAyIDE4LjEwODYgMjMuNDMzMkMxOS4yODA1IDIzLjM1NzMgMjAuMjk2NiAyMi45NTE5IDIxLjEyOTEgMjIuMjI4M0MyMS44OTg1IDIxLjU1OTQgMjIuNDI4NCAyMC42MzY1IDIyLjcwNCAxOS40ODUyQzIyLjk3NzIgMTguMzQzOSAyMi45OTMgMTcuMTE4NSAyMy4wMDgyIDE1LjkzMzVDMjMuMDIwMSAxNS4wMDU3IDIzLjAzMjUgMTMuOTA2OCAyMy4wMzUxIDEyLjc5MjJDMjMuMDMyNSAxMS42Nzc0IDIzLjAyMDEgMTAuNTc4NyAyMy4wMDgyIDkuNjUwOTNDMjIuOTkzIDguNDY1OTEgMjIuOTc3MiA3LjI0MDQ4IDIyLjcwNCA2LjA5ODk4QzIyLjQyODQgNC45NDc3MiAyMS44OTg1IDQuMDI0ODQgMjEuMTI5MSAzLjM1NTkxQzIwLjI5NjYgMi42MzI1MiAxOS4yODA1IDIuMjI3MSAxOC4xMDg2IDIuMTUxMTdDMTYuNDU3OSAyLjA0NDAxIDE0Ljc1ODYgMS45OTQ2MiAxMi45MTIzIDEuOTk4OTJDMTEuMDYxOSAxLjk5NDIzIDkuMzYyNDQgMi4wNDQwMSA3LjcxMTY5IDIuMTUxMTdDNi41Mzk3NyAyLjIyNzEgNS41MjM2NyAyLjYzMjUyIDQuNjkxMjUgMy4zNTU5MUMzLjkyMTgxIDQuMDI0ODQgMy4zOTE4OCA0Ljk0NzcyIDMuMTE2MyA2LjA5ODk4QzIuODQzMDkgNy4yNDA0OCAyLjgyNzM0IDguNDY1NzEgMi44MTIxNSA5LjY1MDkzQzIuODAwMjQgMTAuNTc5NSAyLjc4Nzc5IDExLjY3OSAyLjc4NTIzIDEyLjc5NDVDMi43ODc3OSAxMy45MDUyIDIuODAwMjQgMTUuMDA0OSAyLjgxMjE1IDE1LjkzMzVDMi44MjczNCAxNy4xMTg1IDIuODQzMDkgMTguMzQzOSAzLjExNjMgMTkuNDg1MkMzLjM5MTg4IDIwLjYzNjUgMy45MjE4MSAyMS41NTk0IDQuNjkxMjUgMjIuMjI4M0M1LjUyMzY3IDIyLjk1MTcgNi41Mzk3NyAyMy4zNTcxIDcuNzExNjkgMjMuNDMzQzkuMzYyNDQgMjMuNTQwMiAxMS4wNjIzIDIzLjU5MDIgMTIuOTA3OSAyMy41ODUzWk0xMi44NjMyIDE5LjAzODRDOS42MzIzNSAxOS4wMzg0IDcuMDAzNTkgMTYuMjM2NCA3LjAwMzU5IDEyLjc5MjJDNy4wMDM1OSA5LjM0Nzk5IDkuNjMyMzUgNi41NDU5NyAxMi44NjMyIDYuNTQ1OTdDMTYuMDk0MiA2LjU0NTk3IDE4LjcyMjggOS4zNDc5OSAxOC43MjI4IDEyLjc5MjJDMTguNzIyOCAxNi4yMzY0IDE2LjA5NDIgMTkuMDM4NCAxMi44NjMyIDE5LjAzODRaTTEyLjg2MzIgOC41NDQ3N0MxMC42NjYyIDguNTQ0NzcgOC44Nzg2NiAxMC40NTAzIDguODc4NjYgMTIuNzkyMkM4Ljg3ODY2IDE1LjEzNDEgMTAuNjY2MiAxNy4wMzk2IDEyLjg2MzIgMTcuMDM5NkMxNS4wNjA0IDE3LjAzOTYgMTYuODQ3NyAxNS4xMzQxIDE2Ljg0NzcgMTIuNzkyMkMxNi44NDc3IDEwLjQ1MDMgMTUuMDYwNCA4LjU0NDc3IDEyLjg2MzIgOC41NDQ3N1pNMTkuMzc5MSA0LjU0NzE4QzE4LjYwMjUgNC41NDcxOCAxNy45NzI4IDUuMjE4MjYgMTcuOTcyOCA2LjA0NjI4QzE3Ljk3MjggNi44NzQyOSAxOC42MDI1IDcuNTQ1MzcgMTkuMzc5MSA3LjU0NTM3QzIwLjE1NTggNy41NDUzNyAyMC43ODU0IDYuODc0MjkgMjAuNzg1NCA2LjA0NjI4QzIwLjc4NTQgNS4yMTgyNiAyMC4xNTU4IDQuNTQ3MTggMTkuMzc5MSA0LjU0NzE4WiIgZmlsbD0iIzRDNEFFNCIvPgo8L3N2Zz4K");
}
.icon-twitter {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyNCAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI0IDIuNjQ1ODFDMjMuMTAxMyAzLjA3MDM2IDIyLjExNjggMy4zMjIzNiAyMS4xNDA2IDMuNDQ1MzRDMjIuMTY4NiAyLjc4OTI4IDIyLjkyOTQgMS43NjI1NSAyMy4yOTY5IDAuNTQ3MDU4QzIyLjMzMDMgMS4xNTg0MSAyMS4zMTI2IDEuNjE0NTkgMjAuMjA5OSAxLjg0NjI5QzE5LjI1NyAwLjc2NjA2OCAxNy45NzY3IDAuMTk3MjY2IDE2LjY4NzUgMC4xOTcyNjZDMTUuNDIxOSAwLjE5NzI2NiAxNC4yMTI2IDAuNjUyMjY5IDEzLjI0MzEgMS42MjQzNUMxMi4yNDI2IDIuNjI3MjcgMTEuNjczOSA0LjAxNDcyIDExLjY3MTkgNS40NDQxNUMxMS42NzEzIDUuODQxOTYgMTEuNzMyMSA2LjI0Mjg5IDExLjgxODUgNi42Mzk3M0M3Ljg1OTQ0IDYuNDI4MTMgNC4xODc4MSA0LjQyNiAxLjY4NzUgMS4xNDY3QzEuMjM0MzEgMS45Nzg0MyAwLjk4MzgyNiAyLjg5NzAzIDAuOTg0Mzc1IDMuNzk1MTNDMC45ODU0NzQgNS40ODY3IDEuNzc0MTEgNy4xMzYzMSAzLjE4NzUgOC4xNDI1NEMyLjQwMzgxIDguMTE3NzUgMS42MjIzMSA3Ljk0OTg5IDAuOTM3NSA3LjU0MjlWNy42Mzg1NUMwLjkzODIzMiAxMC4xMzczIDIuNjI0MjcgMTIuMTk1IDQuOTIxODggMTIuNjg5OEM0LjUxNTkzIDEyLjgwNzkgMy45ODk1IDEyLjg5MTUgMy41NjY3MSAxMi44OTE1QzMuNTY1MjUgMTIuODkxNSAzLjU2Mzc4IDEyLjg5MTUgMy41NjI1IDEyLjg5MTVDMy4yMzE5OSAxMi44OTA5IDIuOTAxNDkgMTIuODU2MiAyLjU3ODEyIDEyLjc4OThDMy4yMjMyMSAxNC45MjgyIDUuMjA1ODcgMTYuNDk1NCA3LjMxMjUgMTYuNTM3NkM1LjU2ODk3IDE3Ljk5ODQgMi44NTkzOCAxOC42ODYzIDEuMTcyMjQgMTguNjg2M0MwLjc4MDM5NiAxOC42ODU1IDAuMzg4OTE2IDE4LjY4NTkgMCAxOC42MzYzQzIuMjQ2NTIgMjAuMTczMSA0Ljg1OTggMjAuOTg0OSA3LjUyODc1IDIwLjk4NDlINy41NDc0MlYyMC45ODlDMTYuNTQ2OSAyMC45ODkgMjEuNTYyNSAxMi45ODc5IDIxLjU2MjUgNi4wNTEyMUMyMS41NjI1IDUuODI0IDIxLjUzMDEgNS41NjkyNyAyMS41MTU2IDUuMzQ0MjFDMjIuNDc5MyA0LjYwMTA5IDIzLjMzODggMy42OTk4NyAyNCAyLjY0NTgxWk0xOC44ODM5IDEwLjYwNTlDMTguMzMxNiAxMi4xNjYzIDE3LjUzOCAxMy41NzY0IDE2LjUyNTMgMTQuNzk3MkMxNS40NTE0IDE2LjA5MTUgMTQuMTc5MyAxNy4xMDc3IDEyLjc0NDkgMTcuODE3M0MxMS4yNjg5IDE4LjU0NzMgOS42Mzg4NSAxOC45Mzk2IDcuODk1MTQgMTguOTg1NUw3LjU0NDEzIDE4Ljk4NjFINy41Mjg3NUM3LjQyNzMxIDE4Ljk4NjEgNy4zMjYwNSAxOC45ODQ3IDcuMjI0OTggMTguOTgyQzcuNjY2MDggMTguNzIyNCA4LjA4NTk0IDE4LjQzMTcgOC40NzEwMSAxOC4xMDkxQzkuNDM4OSAxNy4xNTA3IDkuODcwODUgMTUuOTM2NSAxMC4wMzEyIDE0LjU5MjhDMTAuMDMxMiAxNC41OTI4IDkuMjQyMjUgMTQuNjk1MSA4LjM0Mzc1IDE0LjY4ODdDNy42NDc1OCAxNC42ODM2IDYuODg1ODYgMTQuNjIyNyA2LjM3MzkgMTQuMzM5NEM3LjY0Nzk1IDEzLjcyODkgOC4zMTc1NyAxMi43MTY2IDguNTkwMDMgMTEuNDQwNkM3LjUgMTEuNTQwNSA0Ljk2ODc1IDEwLjk0MDkgNC4wNjA3MyAxMC4xNjk5QzUuMDYyNSA5Ljc5MTU2IDYgOC45OTIwNCA2LjM3NSA4LjM0MjQzQzYuMzc1IDguMzQyNDMgNC41OTM3NSA3LjQ0Mjk2IDMuMzM2MzYgNS41MTQ2MUM1Ljc3ODYzIDcuMzcyMyA4LjY4NzA3IDguNDczNzkgMTEuNzI0OCA4LjYzNkwxNC4yMDMxIDguNzQyMTlMMTMuNjkwNCA2LjM5NjcxTDEzLjU5NDcgNS45MzE1NUMxMy41NjI0IDUuNzQyOTkgMTMuNTQ2NyA1LjU4MzEzIDEzLjU0NjkgNS40NDcwOEMxMy41NDggNC41NjY3NCAxMy45MDU2IDMuNzAzOTcgMTQuNTI3NiAzLjA4MDMyQzE1LjExMjggMi40OTM1NiAxNS44Mzk1IDIuMTk2MDggMTYuNjg3NSAyLjE5NjA4QzE3LjMxMzkgMi4xOTYwOCAxNy45MzI0IDIuNDI0NDYgMTguNDQ1OSAyLjgzNTU0QzE5LjI2NTYgMy41OTUyNSAxOS42ODc1IDQuNTk0NjUgMTkuNjg3NSA2LjA1MTIxQzE5LjY4NzUgNy41NDU4MyAxOS40MDk1IDkuMTIwODcgMTguODgzOSAxMC42MDU5WiIgZmlsbD0iIzRDNEFFNCIvPgo8L3N2Zz4K");
}
.icon-linkedin {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGQ9Ik03LjUwMDM3IDE5LjgyODFINC4yMTkxMlY5LjIzNDM4SDcuNTAwMzdWMTkuODI4MVpNNy44Mjc3NiA1Ljg1OTE5QzcuODI3NzYgNC43OTg0NiA2Ljk2NzE2IDMuOTM3NSA1LjkwNjk4IDMuOTM3NUM0Ljg0Mjc3IDMuOTM3NSAzLjk4NDM4IDQuNzk4NDYgMy45ODQzOCA1Ljg1OTE5QzMuOTg0MzggNi45MjAyOSA0Ljg0Mjc3IDcuNzgxMjUgNS45MDY5OCA3Ljc4MTI1QzYuOTY3MTYgNy43ODEyNSA3LjgyNzc2IDYuOTIwMjkgNy44Mjc3NiA1Ljg1OTE5Wk0xOS43ODEyIDEzLjk5OTlDMTkuNzgxMiAxMS4xNTYxIDE5LjE4MDUgOS4wNDY4OCAxNS44NTg0IDkuMDQ2ODhDMTQuMjYyMSA5LjA0Njg4IDEzLjE5MDYgOS44NDUyMSAxMi43NTMxIDEwLjY3NTRIMTIuNzVWOS4yMzQzOEg5LjU2MjVWMTkuODI4MUgxMi43NVYxNC41NjgyQzEyLjc1IDEzLjE5MDcgMTMuMTAwNiAxMS44NTYzIDE0LjgwODEgMTEuODU2M0MxNi40OTIzIDExLjg1NjMgMTYuNTQ2OSAxMy40MzE1IDE2LjU0NjkgMTQuNjU1OFYxOS44MjgxSDE5Ljc4MTJWMTMuOTk5OVpNMjQgMjEuMTg3NVYyLjgxMjVDMjQgMS4yNjE2IDIyLjczODQgMCAyMS4xODc1IDBIMi44MTI1QzEuMjYxNiAwIDAgMS4yNjE2IDAgMi44MTI1VjIxLjE4NzVDMCAyMi43Mzg0IDEuMjYxNiAyNCAyLjgxMjUgMjRIMjEuMTg3NUMyMi43Mzg0IDI0IDI0IDIyLjczODQgMjQgMjEuMTg3NVpNMjEuMTg3NSAxLjg3NUMyMS43MDQ0IDEuODc1IDIyLjEyNSAyLjI5NTU5IDIyLjEyNSAyLjgxMjVWMjEuMTg3NUMyMi4xMjUgMjEuNzA0NCAyMS43MDQ0IDIyLjEyNSAyMS4xODc1IDIyLjEyNUgyLjgxMjVDMi4yOTU1OSAyMi4xMjUgMS44NzUgMjEuNzA0NCAxLjg3NSAyMS4xODc1VjIuODEyNUMxLjg3NSAyLjI5NTU5IDIuMjk1NTkgMS44NzUgMi44MTI1IDEuODc1SDIxLjE4NzVaIiBmaWxsPSIjNEM0QUU0Ii8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDAiPgo8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==");
}

/* ==========================================================================
   Pages
   ========================================================================== */

.full-height {
  height: 100vh;
}

.price-packs-page .start-project.full-height {
  min-height: 60vw;
  max-height: 1000px;
}

.the-media .hero.is-sticky-top {
  margin-bottom: 0;
}

.the-media .hero-content {
  display: grid;
  grid-template-columns: 42% 52%;
  align-items: stretch;
  width: 90%;
}

.the-media .hero h1,
.the-media .hero .title {
  width: 100%;
  margin-bottom: 1.2em;
  text-align: right;
  text-decoration: none;
}

.the-media .hero-content,
.the-media .hero-text {
  margin: auto;
}

.the-media .hero-text {
  grid-column: span 2;
  width: 90%;
  margin-top: 2em;
  margin-bottom: -4em;
  padding: 2em 6em;
  font-size: 1.7em;
  line-height: 1.6em;
  text-align: center;
  color: white;
}

.hero-square {
  position: absolute;
  z-index: -1;
  width: 42%;
  height: 40vh;
  top: 160px;
  right: 0;
  background: var(--primary-color-packs);
  transition: all 1600ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hero-topics a {
  display: inline-block;
  vertical-align: top;
  position: relative;
  line-height: 68px;
  font-size: 64px;
  color: white;
}

.hero-topics a:before {
  transition: height 600ms cubic-bezier(0, 0.2, 0.05, 0.9);
  -webkit-text-stroke: 1px white;
  content: attr(data-text);
  position: absolute;
  overflow: hidden;
  color: var(--primary-color);
  height: 68px;
  font-size: 64px;
  left: 0;
  top: 0;
  width: 100%;
}

.hero-topics a:hover,
.hero-topics a:focus {
  color: white;
}

.hero-topics a:hover:before,
.hero-topics a:focus:before {
  height: 0;
}

.hero-right a.btn {
  margin-top: 1em;
  margin-bottom: -1em;
  position: relative;
  z-index: 1;
}

.hero-square-holder {
  position: absolute;
  z-index: 0;
  width: calc(100vw + 12vw);
  height: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.hero-text {
  z-index: 1;
}

.paper-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0 4vw;
  width: 100%;
  margin: 2em auto;
  padding: 7vw 7vw 5.5vw;
  background-color: var(--light-grey);
  position: relative;
  z-index: 1;
  box-shadow: 3px 5px 60px rgba(50, 50, 205, 0.5);
}

.paper-box h2 {
  letter-spacing: -0.8px !important;
}

.paper-box h3 {
  margin-bottom: 1.75em;
}

.paper-box h3 span {
  font-weight: normal;
}

.paper-box-title {
  position: relative;
}

.paper-box-title a {
  position: absolute !important;
  bottom: 0;
}

.paper-box-color {
  grid-column: span 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 6% 10%;
  margin: 4em auto;
  padding: 7vw;
  color: white;
  background-color: var(--primary-color-packs);
  box-shadow: 3px 5px 60px rgba(50, 50, 205, 0.5);
}

.paper-box-color h3 {
  margin-bottom: 0.8em;
}

.paper-box-color .feature-text p,
.notice-text p {
  font-weight: 300;
}

.paper-box .description {
  margin-top: 3em;
}

.feature-icon {
  display: grid;
  grid-template-columns: 8vw auto;
}

.feature-icon svg {
  margin-top: 1.5em;
  transform: scale(2);
  transform-origin: center left;
  fill: var(--secondary-color);
}

.the-media .notice {
  background: transparent;
}

.the-media .notice-content {
  display: grid;
  grid-template-columns: 4fr 5fr;
  grid-gap: 0 10%;
}

.service-item {
  display: grid;
  grid-template-columns: 3fr 3fr;
  grid-template-rows: 1fr 3fr;
  grid-gap: 0 6vw;
  margin-bottom: 8em;
  padding: 3em;
  background-color: var(--light-grey);
  box-shadow: 3px 5px 60px rgba(50, 50, 205, 0.5);
}

.service-item.img-left {
  grid-template-areas:
    "title title"
    "image text";
}

.service-item.img-right {
  grid-template-areas:
    "text title"
    "text image";
}

.service-image {
  transition: top 1600ms cubic-bezier(0.075, 0.82, 0.165, 1);
}

.service-item h3 {
  grid-area: title;
}

.service-item .service-image {
  grid-area: image;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.service-item .service-image,
.service-item .service-image picture {
  height: 28vw;
  min-height: 320px;
  max-height: 520px;
}

.service-item.img-left .service-image {
  margin-bottom: -12.5vw;
  margin-left: -12.5vw;
}

.service-item.img-left .service-text {
  grid-area: text;
}

.service-item.img-right h3 {
  grid-area: title;
}

.service-item.img-right .service-image {
  margin-right: -12.5vw;
  margin-bottom: -50%;
}

.service-item.img-right .service-image .tns-outer {
  height: 50vh;
}

.service-item.img-right .service-text {
  grid-area: text;
}

.online-advertising-page .service-image {
  position: relative;
}

.complete-packages {
  display: flex;
  padding-right: 0;
  padding-left: 10em;
  align-items: center;
}

.design-page .complete-packages-text,
.online-advertising-page .complete-packages-text {
  width: 26%;
}

.home .price-packs h2 {
  margin-bottom: 0.7em;
}

.price-packs .home-left p {
  margin-top: 2vw;
  margin-bottom: 2.5vw;
  padding-right: 1vw;
}

.complete-packages h2 {
  padding-right: 0;
  margin-bottom: 1em;
}

.complete-packages-slider {
  width: 65%;
  margin-left: 7%;
  color: white;
}

.approach-page img {
  position: relative;
  z-index: 1;
}

.hero-creators {
  display: flex;
  align-items: center;
}

.hero-creators .title {
  width: 100%;
  text-align: center;
}

.hero-creators .btn-arrow {
  width: max-content;
  margin: auto;
  margin-top: 3vw;
  position: relative;
  z-index: 1;
}

.notice-creators {
  overflow: hidden;
}

.the-creators-page .hero-text {
  width: 68%;
}

.price-packs-page .price-packs h1 {
  font-size: 6em;
}

.price-packs-page .pack {
  color: white;
  background-color: var(--primary-color-packs);
  position: relative;
}

.price-packs-page .price-packs {
  display: grid;
  grid-template-columns: 1fr;
}

.price-packs-top {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 4em;
  align-items: center;
  margin: 1em 0 4em;
}

.price-packs-top h1 {
  margin: 0;
  margin-bottom: -0.3em;
  padding: 0;
}

.price-packs-page .price-packs-top .text {
  margin: 0;
}

.price-packs-page .page-header {
  padding-bottom: 20px !important;
}

.price-packs-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 5vw;
  row-gap: 1vw;
}

.price-packs-content .price-packs-item {
  margin-bottom: 6em;
}

.price-packs-content .price-packs-item .pack {
  border: 3px solid transparent;
}

.price-packs-content .pack {
  box-shadow: 3px 5px 60px rgba(50, 50, 205, 0.5);
}
.pack-overview {
  overflow: hidden;
}

.pack-overview .pack-price {
  font-size: 4.32em;
  color: var(--secondary-color);
  margin-bottom: 0;
  padding-bottom: 0;
}

.pack-overview .pack-price span {
  padding-left: 0.4em;
  font-size: 0.35em;
  font-weight: 600;
}

.pack-overview .pack-price p {
  font-weight: 300;
  color: white;
  font-size: 15px;
  text-align: center;
}

.pack-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.pack-header h2 {
  font-size: 6.2em;
  line-height: 0.9em;
}

.pack-price a.btn {
  float: right;
  font-size: initial;
  font-weight: initial;
}

.pack-overview .pack-content {
  display: grid;
  grid-template-columns: 78% 22%;
  grid-gap: 0 4em;
}

.pack-details {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  justify-content: space-between;
  grid-gap: 2.5vw;
  width: 100%;
  margin-bottom: 4vw;
  padding: 4.5vw 6vw 5vw;
  background: var(--primary-color-packs);
  border-radius: 1.1vw;
}

.pack-details h4 {
  font-size: 1.52em;
  line-height: 1.8em;
  margin-bottom: 1em;
  margin-top: 0.5em;
}

.pack-details ul {
  font-size: 1em;
  font-weight: 300;
  line-height: 2em;
}

.pack-details .text {
  grid-column: span 3;
  margin-top: 2em;
  margin-bottom: -2em;
}

.pack-highlight {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  grid-auto-flow: column;
  position: relative;
  width: calc(100% + 12.5vw);
  margin-left: -12.5vw;
  margin-top: 6vw;
  padding: 8vw 0 6vw 12vw;
  color: var(--primary-color);
  background-color: white;
}

.pack-highlight-icons {
  display: flex;
  justify-content: space-between;
  margin-right: 0;
  margin-bottom: 2.5vw;
}

.pack-highlight-text {
  margin-right: 0;
}

.pack-highlight-icons .icon {
  display: inline;
  margin: 0.4em 0 0 0;
  text-transform: uppercase;
}

.pack-highlight-icons .icon svg {
  margin: 0;
  transform: scale(1.7);
  transform-origin: bottom center;
}

.pack-highlight-icons .icon p {
  margin-top: 1em;
  letter-spacing: 0;
}

.pack-highlight h3 {
  margin-bottom: 0.5em;
  font-size: 1.75em;
  letter-spacing: 0;
  -webkit-text-stroke: 0.2px;
}

.pack-gallery {
  grid-row: span 2;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  width: 50vw;
  right: -12.75vw;
  transition: all 1600ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-top: 0 !important;
}

.pack-gallery picture img {
  display: none;
}

.pack-gallery picture {
  position: relative;
  height: 36vw;
}

.pack-gallery-slider {
  cursor: grab;
}

.pack-about {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  grid-gap: 1vw 14vw;
  margin-top: 10vw;
}

.pack-about h2 {
  grid-column: span 2;
  font-size: 1em;
  font-weight: 400;
  line-height: 2em;
  letter-spacing: 1px !important;
  text-transform: uppercase;
}

.packs-slider-section h2 {
  font-size: 1em;
  font-weight: 400;
  line-height: 2em;
  margin-top: 0;
  margin-bottom: 4em;
  margin-left: 8.4em;
  text-transform: uppercase;
}

.pack-about h2:before,
.packs-slider-section h2:before {
  content: "";
  display: block;
  float: left;
  width: 4em;
  height: 1em;
  margin-right: 2em;
  border-bottom: 1px solid white;
}

.packs-slider-section h2:before {
  border-bottom: 1px solid var(--primary-color);
}

.info-pack {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  color: var(--primary-color-dark) !important;
  background: var(--secondary-color) !important;
}

.info-pack p {
  font-weight: 500;
}

.info-pack .btn-primary {
  margin-bottom: -0.5em;
  margin-top: 3em;
  display: table;
  margin-left: auto;
  margin-right: auto;
}

.pack-about h3 {
  line-height: 1.2em;
  margin: 1em 0;
}

.pack-about p {
  font-weight: 300;
}

.pack-about img {
  grid-row-start: 2;
  grid-row-end: 4;
  grid-column-start: 2;
  width: 100%;
}

.pack-about-item h3:last-of-type {
  margin-top: 2.8em;
}

.price-packs-page .start-project .title {
  width: 50%;
  font-size: 1.4em;
  line-height: 1.6em;
}

.price-packs-page .start-project-top {
  display: flex;
}

.price-packs-page .start-project-top > div {
  margin-left: 6vw;
}

.price-packs-page .start-project-top h2 {
  text-align: left;
}

.price-packs-page .start-project form {
  grid-gap: 0;
  margin-top: 2.4em;
}

.price-packs-page .start-project form .btn {
  float: right;
  margin-top: 1.2em;
}

.contact-us-on {
  margin-top: 0.4em;
}

.contact-us-on h3 {
  font-size: 20px;
}

.contact-us-on a {
  display: inline-block;
  color: white;
  margin-top: 0.4em;
  margin-right: 0.4em;
}

.contact-us-on > a:first-of-type {
  margin-left: -5px;
}

.contact-us-on svg {
  transition: all 200ms ease;
}

.contact-us-on a:hover svg,
.contact-us-on a:focus svg {
  fill: var(--secondary-color);
}

.contact-us-on svg {
  fill: white;
  transform: scale(1.2);
  transform-origin: top center;
}

.online-video-page .pack-about {
  grid-template-rows: auto auto;
  grid-auto-flow: row;
}

.slider,
.packs-slider {
  user-select: none;
}

.packs-slider-section {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.packs-slider {
  width: 100%;
  overflow: hidden;
}

.thank-you-page .full-height {
  text-align: center;
}

.thank-you-page img {
  margin-top: 4em;
}

.tns-outer {
  padding: 0 !important;
}
.tns-outer [hidden] {
  display: none !important;
}
.tns-outer [aria-controls],
.tns-outer [data-action] {
  cursor: pointer;
}
.tns-slider {
  -webkit-transition: all 0s;
  -moz-transition: all 0s;
  transition: all 0s;
}
.tns-slider > .tns-item {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.tns-horizontal.tns-subpixel {
  white-space: nowrap;
}
.tns-horizontal.tns-subpixel > .tns-item {
  display: inline-block;
  vertical-align: top;
  white-space: normal;
  margin-left: -0.1px;
}
.tns-horizontal.tns-no-subpixel:after {
  content: "";
  display: table;
  clear: both;
}
.tns-horizontal.tns-no-subpixel > .tns-item {
  float: left;
}
.tns-horizontal.tns-carousel.tns-no-subpixel > .tns-item {
  margin-right: -100%;
}
.tns-no-calc {
  position: relative;
  left: 0;
}
.tns-gallery {
  position: relative;
  left: 0;
  min-height: 1px;
}
.tns-gallery > .tns-item {
  position: absolute;
  left: -100%;
  -webkit-transition: transform 0s, opacity 0s;
  -moz-transition: transform 0s, opacity 0s;
  transition: transform 0s, opacity 0s;
}
.tns-gallery > .tns-slide-active {
  position: relative;
  left: auto !important;
}
.tns-gallery > .tns-moving {
  -webkit-transition: all 0.25s;
  -moz-transition: all 0.25s;
  transition: all 0.25s;
}
.tns-autowidth {
  display: inline-block;
}
.tns-lazy-img {
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  transition: opacity 0.6s;
  opacity: 0.6;
}
.tns-lazy-img.tns-complete {
  opacity: 1;
}
.tns-ah {
  -webkit-transition: height 0s;
  -moz-transition: height 0s;
  transition: height 0s;
}
.tns-ovh {
  overflow: hidden;
}
.tns-visually-hidden {
  position: absolute;
  left: -10000em;
}
.tns-transparent {
  opacity: 0;
  visibility: hidden;
}
.tns-fadeIn {
  opacity: 1;
  filter: alpha(opacity=100);
  z-index: 0;
}
.tns-normal,
.tns-fadeOut {
  opacity: 0;
  filter: alpha(opacity=0);
  z-index: -1;
}
.tns-vpfix {
  white-space: nowrap;
}
.tns-vpfix > div,
.tns-vpfix > li {
  display: inline-block;
}
.tns-t-subp2 {
  margin: 0 auto;
  width: 310px;
  position: relative;
  height: 10px;
  overflow: hidden;
}
.tns-t-ct {
  width: 2333.3333333%;
  width: -webkit-calc(100% * 70 / 3);
  width: -moz-calc(100% * 70 / 3);
  width: calc(100% * 70 / 3);
  position: absolute;
  right: 0;
}
.tns-t-ct:after {
  content: "";
  display: table;
  clear: both;
}
.tns-t-ct > div {
  width: 1.4285714%;
  width: -webkit-calc(100% / 70);
  width: -moz-calc(100% / 70);
  width: calc(100% / 70);
  height: 10px;
  float: left;
}

.tns-outer button {
  display: none;
}

.tns-nav {
  position: absolute;
  bottom: -32px;
}

#branding .tns-nav {
  top: -46px;
  right: 0;
}

.service-image .tns-nav button,
.pack-gallery .tns-nav button {
  display: inline-block;
  margin-right: 10px;
  padding: 5px;
  border-radius: 50% !important;
  border: 1px solid var(--secondary-color);
  background: transparent;
  outline: none;
  transition: all 300ms ease;
}

.tns-nav button.tns-nav-active {
  background-color: var(--secondary-color);
}

.workflow-scroll {
  padding-bottom: 10em;
  overflow: hidden;
}

.workflow-scroll .workflow-item {
  margin-left: 11vw;
  margin-bottom: 25vh;
}

.workflow-scroll .workflow-item-text .text {
  opacity: 1;
  transform: translateY(0);
}

.the-creators-page .member.paper-box {
  margin-bottom: 12em;
}

.member-photo.nuno {
  margin: 0 0 -12.5vw -12.5vw;
  background: url(/img/nuno.jpg) center no-repeat;
  background-size: cover;
}

.member-photo.birgit {
  margin: 0 -12.5vw -12.5vw 0;
  background: url(/img/birgit.jpg) center no-repeat;
  background-size: cover;
}

.web-page .service-image {
  width: calc(100% + 20em);
}

.page-not-found {
  min-height: 100vh;
}

.page-not-found > h2 {
  margin-top: 30vh;
}

/* ==========================================================================
   Sticky Elements
   ========================================================================== */

section {
  position: relative;
  z-index: 1;
}

.is-sticky-top {
  position: sticky;
  top: 0;
  z-index: 0;
  margin-bottom: 100vh;
}

.is-sticky-bottom {
  position: sticky;
  bottom: 0;
  z-index: 0;
  margin-top: 100vh;
}

section.bg-white.is-sticky-top,
.notice.is-sticky-top {
  display: flex;
  min-height: 100vh;
  overflow: hidden;
}

/* ==========================================================================
   Animations
   ========================================================================== */
@-webkit-keyframes scroll-down {
  0% {
    -webkit-transform: translate(0, -12px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(0, 8px);
    opacity: 0;
  }
}

@keyframes scroll-down {
  0% {
    transform: translate(0, -12px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(0, 8px);
    opacity: 0;
  }
}

.intro-image,
.service-image,
.service-image > figure,
.workflow-image,
.member-photo,
.pack-gallery,
.pack-gallery picture,
.service-image,
.service-image picture {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bubble {
  position: absolute;
  top: 0;
  z-index: -1;
  transform: scale(1.3);
  transition: all 25s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.bubble.active {
  opacity: 1;
  transform: translateY(0);
  transition: all 1600ms cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}
.bubble.inactive {
  opacity: 0;
  transform: translateY(-30vh);
}

.bubble-primary,
.bubble-bg-white {
  animation: floating 120s cubic-bezier(0.075, 0.82, 0.165, 1) infinite
    alternate;
}

.home .bubble-primary,
.hero-square-holder .bubble-primary,
.bubble-secondary {
  animation: scaling 18s cubic-bezier(0.86, 0, 0.07, 1) infinite alternate;
  transition: top 1.3s ease-out, right 9s ease-out;
}

.hero-square-holder .bubble {
  transition: all 45s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.home .bubble-primary {
  top: 10vw !important;
}
.hero {
  overflow: hidden;
}
.hero .bubble {
  position: absolute;
  top: 10vh;
}
.hero .bubble-secondary {
  top: 84vh;
  left: 16vh;
}

@-webkit-keyframes floating {
  from {
    transform: scale(1) rotate(0deg);
  }
  to {
    transform: scale(1.5) rotate(360deg);
  }
}

@keyframes floating {
  from {
    transform: scale(1) rotate(0deg);
  }
  to {
    transform: scale(1.5) rotate(360deg);
  }
}

@-webkit-keyframes scaling {
  from {
    transform: scale(1.15, 1.15);
  }
  to {
    transform: scale(1.25, 1.25);
  }
}
@keyframes scaling {
  from {
    transform: scale(1.15, 1.15);
  }
  to {
    transform: scale(1.25, 1.25);
  }
}

.svg-obj {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.path {
  fill: transparent;
  fill-opacity: 0;
  stroke: var(--secondary-color);
  stroke-width: 2;
  stroke-linecap: round;

  stroke-dasharray: 860;
  stroke-dashoffset: 860;
}

.icon.svg-animating .path,
.feature-icon.svg-animating .path {
  animation: draw 6s forwards cubic-bezier(0.25, 0.25, 0.5, 1);
}

.icon.svg-animating .path:nth-child(1),
.feature-icon.svg-animating .path:nth-child(1) {
  animation-delay: 0.3s;
}
.icon.svg-animating .path:nth-child(2),
.feature-icon.svg-animating .path:nth-child(2) {
  animation-delay: 0.6s;
}
.icon.svg-animating .path:nth-child(3),
.feature-icon.svg-animating .path:nth-child(3) {
  animation-delay: 0.9s;
}
.icon.svg-animating .path:nth-child(4),
.feature-icon.svg-animating .path:nth-child(4) {
  animation-delay: 1.2s;
}
.icon.svg-animating .path:nth-child(5),
.feature-icon.svg-animating .path:nth-child(5) {
  animation-delay: 1.5s;
}
.icon.svg-animating .path:nth-child(6),
.feature-icon.svg-animating .path:nth-child(6) {
  animation-delay: 1.8s;
}
.icon.svg-animating .path:nth-child(7),
.feature-icon.svg-animating .path:nth-child(7) {
  animation-delay: 2.1s;
}
.icon.svg-animating .path:nth-child(8),
.feature-icon.svg-animating .path:nth-child(8) {
  animation-delay: 2.4s;
}

/* .icon:hover .path,
.feature-icon.svg-animating:hover .path {
  animation: draw-hover 1s reverse cubic-bezier(1, 0, 0, 1);
  animation-delay: 0;
} */

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@-moz-keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@-o-keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes draw-hover {
  to {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes draw-hover {
  to {
    stroke-dashoffset: 0;
  }
}

@-moz-keyframes draw-hover {
  to {
    stroke-dashoffset: 0;
  }
}

@-o-keyframes draw-hover {
  to {
    stroke-dashoffset: 0;
  }
}

.pack-details {
  box-shadow: 0 25px 150px rgba(50, 50, 205, 0.5);
}

.members p a {
  color: white;
  font-weight: 300;
  text-decoration: underline;
  transition: all 300ms ease-out;
}

.members p a:hover,
.members p a:focus {
  color: var(--secondary-color);
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
  display: none !important;
}

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

.invisible {
  visibility: hidden;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.clearfix:after {
  clear: both;
}

/* ==========================================================================
   Media queries
   ========================================================================== */

@media only screen and (max-width: 35em) {
  .hide-mobile,
  .workflow__fix-moblie {
    display: none;
  }

  .show-mobile {
    display: block;
  }

  header.mobile-show {
    position: fixed;
    z-index: 3;
    width: 100%;
  }

  .members {
    display: block;
    margin-top: 8vw;
  }

  .members .title {
    font-size: 8vw;
    line-height: 8vw;
    margin-bottom: 6.6vw;
  }

  .members .title span {
    -webkit-text-stroke: 0;
  }

  .notice-creators .bubble {
    left: -20%;
    margin-top: 100%;
    zoom: 1;
  }

  .hero-creators {
    min-height: 90vh !important;
  }

  #the-studio {
    min-height: unset;
  }

  #the-studio a {
    margin-bottom: 0 !important;
  }
}

@media only screen and (min-width: 35em) and (max-width: 52em) {
  .members {
    display: block;
    width: 85%;
    margin: auto auto -30% !important;
  }

  .members .title {
    font-size: 4vw;
    line-height: 4vw;
    margin-bottom: 4.6vw;
  }

  .members .title span {
    -webkit-text-stroke: 0;
  }

  .member-bio:first-child {
    margin-bottom: 30%;
  }

  .notice-creators .bubble {
    margin-top: 50%;
    zoom: 1.3;
  }

  .notice-creators {
    padding-bottom: 20% !important;
  }
}

@media only screen and (min-width: 52em) {
  .footer-right .footer-bottom {
    position: relative;
    top: 1.1vw;
  }

  .members {
    display: flex;
  }

  .members .title {
    font-size: 2vw;
    line-height: 2.3vw;
    margin-bottom: 1.6vw;
  }

  .members .title span {
    font-size: 1.2vw;
    -webkit-text-stroke: 0;
  }

  .member-bio {
    width: 50%;
    padding: 0 7%;
  }

  .notice-creators {
    overflow: visible;
  }

  .notice-creators .notice-content {
    display: block;
  }

  .notice-creators .title {
    margin-left: 33.33%;
    padding-right: 0 !important;
  }

  .notice-creators .text {
    margin-left: 52%;
    margin-top: 9%;
    padding-right: 6%;
  }

  .notice-creators .text:last-child {
    margin-bottom: 20%;
  }

  .notice-creators .bubble {
    left: 13%;
    margin-top: 20%;
    zoom: 1.6;
  }
}

@media screen and (orientation: landscape) and (min-device-width: 319px) and (max-device-width: 892px) {
  /*  REVIEW */
  .hide-mobile {
    display: none;
  }

  .show-mobile {
    display: block;
  }

  header.mobile-show {
    position: fixed;
    z-index: 3;
    width: 100%;
    box-shadow: 0 3px 16px 0 var(--primary-color-dark);
  }
}

/* Medium devices > 726px */
@media only screen and (min-width: 40em) and (max-width: 65em) and (min-device-width: 48em) {
  .page-header {
    grid-template-columns: 6fr 7fr;
  }
}

/* ==========================================================================
   New media queries
   ========================================================================== */

@media only screen and (max-width: 35em) {
  .home-content,
  .home-left,
  .home-right,
  footer,
  .footer-left,
  .footer-right,
  .footer-right .footer-top,
  .footer-right .footer-bottom,
  .start-project form,
  .complete-packages-slider,
  .the-media .hero-content,
  .the-media .hero-text,
  .service-item,
  .complete-packages,
  .complete-packages-text,
  .design-page .complete-packages-text,
  .online-advertising-page .complete-packages-text,
  .paper-box,
  .paper-box h2,
  .paper-box-color,
  .feature-icon,
  .the-media .notice,
  .the-media .notice-content,
  .page-header,
  .workflow-scroll .workflow-item,
  .price-packs-page .price-packs,
  .price-packs-content,
  .pack-overview,
  .pack-header,
  .pack-details,
  .pack-highlight,
  .pack-about,
  .price-packs-page .start-project .title,
  .home .price-packs .pack.active,
  .home .price-packs .pack.inactive {
    display: block;
    width: 100%;
  }

  section,
  footer,
  .start-project,
  .complete-packages,
  .the-media .notice,
  .paper-box,
  .approach-page .workflow,
  .price-packs-page .price-packs,
  .pack-highlight,
  .price-packs-page .start-project,
  .the-creators-page.the-media .notice,
  .service-item {
    padding: 24vw 6vw;
  }

  .full-height {
    height: auto;
  }

  .pack-overview,
  .feature-icon {
    padding: 6vw;
  }

  .home-content h2,
  .the-media .hero h1,
  .the-media .hero .title {
    text-align: left;
  }

  .footer-right .footer-top ul,
  .complete-packages-slider,
  .services-list,
  .workflow-scroll .workflow-item {
    margin-left: 0;
  }

  .footer-right .footer-top ul {
    margin-bottom: 2em;
  }

  .footer-right ul li {
    padding-right: 0;
    padding-left: 0;
  }

  .paper-box,
  .paper-box-color,
  .service-item,
  .service-image,
  .service-image > figure,
  .pack-highlight,
  .pack-highlight-icons,
  .pack-highlight-text,
  .pack-about,
  .the-creators-page.the-media .notice,
  .member-photo.nuno,
  .member-photo.birgit,
  footer .btn,
  .footer-right .footer-bottom ul li {
    margin: 0;
  }

  .the-media .hero-content,
  .the-media .hero-text,
  .the-media section.bg-transparent,
  .start-project .home-content,
  .service-item h3 {
    padding: 0;
  }

  .paper-box h2,
  .notice .title {
    padding-right: 0;
  }

  .bg-transparent {
    overflow: hidden;
  }

  .is-sticky-top,
  .is-sticky-bottom {
    position: relative;
    z-index: 0;
    margin: 0;
  }

  /* full-width fix */
  .service-image,
  .service-item.img-left .service-image,
  .service-item.img-right .service-image,
  .complete-packages-slider,
  .pack-highlight,
  .pack-gallery,
  .workflow-scroll {
    width: calc(100% + 12vw);
    margin-left: -6vw;
  }

  section.hero,
  .contact-page section.start-project {
    padding-top: 12vw;
  }

  section.page-header {
    padding-top: 16vh;
    padding-bottom: 15vh !important;
  }

  .hero h1 {
    text-align: right;
  }

  .home .price-packs {
    height: auto;
  }

  .home .price-packs .home-right {
    margin-top: 12vw;
  }

  .home .price-packs .btn.show-mobile {
    clear: both;
    display: inline-block;
    margin-top: 12vw;
  }

  section.start-project {
    margin-bottom: 0;
  }

  div.fake {
    display: none;
  }

  .the-media .notice {
    background: var(--primary-color);
  }

  .feature-icon {
    text-align: center;
    margin-top: 2em;
  }

  .feature-icon:first-of-type {
    margin-top: 4em;
  }

  .feature-icon svg {
    display: block;
    margin: auto;
    margin-bottom: 1em;
    transform: scale(2);
    transform-origin: bottom center;
  }

  .service-image,
  .service-image > figure {
    height: 60vw;
  }

  .online-advertising-page .service-image {
    height: 100vw;
    margin-top: 20vw;
    top: 0 !important;
    margin-bottom: -25vw;
  }

  .service-image > figure {
    width: 100%;
    position: relative;
    margin-bottom: -60vw;
  }

  .service-item {
    display: flex;
    flex-direction: column;
  }

  .services-list,
  #web-design .service-item {
    padding-bottom: 0;
  }

  article#web-design .btn {
    margin-bottom: 20vw;
  }

  .paper-box .btn.show-mobile {
    display: inline-block;
  }

  .web-page .service-image {
    position: unset;
    width: 100%;
    margin: auto;
  }

  .notice,
  .notice.is-sticky-top {
    min-height: auto;
  }

  .service-item h3 {
    order: 1;
  }

  .service-item .crossfade,
  .service-item .service-image {
    order: 3;
  }

  .service-item .service-text {
    order: 2;
  }

  .approach-page .workflow-image {
    width: calc(100% - 12vw);
    height: 28vh;
    margin: auto;
  }

  .approach-page .workflow-item:nth-child(1) .workflow-image {
    margin-bottom: 6vw;
  }

  .approach-page .workflow-item:nth-child(3) .workflow-item-text {
    margin-top: -27vw;
  }

  .approach-page .workflow-item:nth-child(4) .workflow-item-text {
    margin-top: -20vw;
  }

  .approach-page .workflow-item:nth-child(5) .workflow-item-text {
    margin-top: -24vw;
  }

  .approach-page .workflow-item:nth-child(6) .workflow-item-text {
    margin-top: -29vw;
  }

  .approach-page .workflow-item:nth-child(7) .workflow-item-text {
    margin-top: -40vw;
  }

  .workflow-scroll .workflow-item:last-of-type {
    margin-bottom: 0;
  }

  .complete-packages-slider {
    margin-bottom: -22.5vw;
  }

  .complete-packages-text {
    margin-bottom: -40px;
  }

  .packs-slider {
    padding: 60px 0;
  }

  .packs-slider .pack {
    padding: 12vw 10vw 16vw;
  }

  .packs-slider .pack-title {
    font-size: 4.5vw;
    line-height: 6vw;
  }

  .packs-slider .pack-price {
    font-size: 11vw;
    line-height: 13vw;
  }

  .packs-slider .pack .pack-features {
    margin-bottom: 1vw;
    font-size: 3.5vw;
    letter-spacing: 0;
  }

  .packs-slider .pack .pack-features li {
    line-height: 7.5vw;
  }

  .packs-slider .pack .pack-features li:before {
    width: 12px;
    margin-right: 0.4em;
  }

  .packs-slider .pack .btn-plus {
    right: 4vw;
    bottom: 0vw;
  }

  .workflow-scroll {
    clear: both;
    padding-top: 6vw;
  }

  .pack-overview .bubble {
    display: none;
  }

  .pack-overview .tns-nav {
    bottom: -24px;
    right: 0;
  }

  .pack-highlight {
    transform: none;
  }

  .pack-gallery {
    position: relative;
    right: 0;
    margin-top: -10vw;
    margin-bottom: -5vw;
  }

  .pack-about {
    padding-top: 30vw;
  }

  .pack-gallery picture {
    height: 80vw;
  }

  .price-packs-page .start-project form .btn {
    float: none;
    display: block;
    margin: auto;
    text-align: center;
  }

  .contact-us-on {
    clear: both;
    text-align: center;
    top: 20vw;
    position: relative;
    width: 100%;
    padding: 8vw 12vw 12vw;
    border-radius: 8px;
    margin: auto;
    margin-bottom: -20vw;
    background: transparent;
    animation: none !important;
    backdrop-filter: blur(30px);
    border-top: 3px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 6px 6px -2px rgba(50, 50, 205, 0.34);
  }

  .member.paper-box:after {
    display: none !important;
  }

  .price-packs .text-vertical {
    writing-mode: horizontal-tb;
    transform: rotate(0deg);
  }

  .price-packs > *,
  .home .price-title,
  .home .pack {
    height: auto !important;
  }

  .price-packs .pack.inactive {
    padding: 1.5em;
  }

  .price-packs .pack h3 {
    text-transform: none;
  }

  .price-packs .pack.inactive h3 {
    position: unset;
  }

  .pack-about h2:before,
  .packs-slider-section h2:before {
    float: none;
    margin: 6vh 0 2vh;
  }

  .price-packs-page .packs-slider .pack {
    padding: 13vw 11.5vw;
  }

  .price-packs-page .packs-slider .pack-title {
    font-size: 4.8vw;
    line-height: 6.4vw;
  }

  .price-packs-page .packs-slider .pack-features {
    margin-bottom: 6.2vw;
    font-size: 3.6vw;
  }

  .price-packs-page .packs-slider .pack-features li {
    line-height: 7vw;
  }

  .price-packs-page .packs-slider .btn-plus {
    top: unset;
    right: 6vw;
    bottom: 3vw;
  }

  .btn-plus {
    font-size: 15vw;
  }

  .price-packs-page .btn-plus {
    position: relative;
    top: -14vw;
    right: -6vw;
  }

  .price-packs-page .pack {
    margin-bottom: 6vw;
  }

  .pack .more-info {
    display: none;
  }

  .price-packs .pack,
  .packs-slider .pack {
    border-radius: 5vw !important;
  }

  .packs-slider-section h2 {
    margin-left: 6vw;
    width: 60%;
  }

  .pack-highlight-icons {
    margin-bottom: 12vw;
  }

  .pack-highlight-icons .icon svg {
    transform: scale(1.25);
  }

  .pack-highlight-icons p {
    font-size: 13px;
    letter-spacing: 0 !important;
  }

  .hero-creators {
    padding-bottom: 0;
  }

  .hero-creators .btn-arrow.mobile-down {
    width: 60%;
    margin: 12vw auto 0;
    text-align: center;
  }

  .hero-creators .btn-arrow.mobile-down:after {
    float: none;
    margin: 6vw auto;
  }

  .members {
    padding-top: 3%;
  }

  .member-bio {
    padding-bottom: 3%;
  }
}

/* narrow window and ipad vertical */
@media only screen and (min-width: 35em) and (max-width: 50em) {
  .footer-right .footer-top ul {
    margin-left: 2em;
  }
  footer .site-map {
    display: none;
  }
  .btn.btn-primary:after,
  .btn.btn-secondary:after,
  .btn-transparent:after {
    min-width: 13px;
    min-height: 17px;
  }
}

/* ipad vertical */
@media all and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .service-item .service-image,
  .service-item .service-image picture {
    height: 46vw;
  }

  .the-media .hero {
    position: relative;
    top: -12.5vh;
    margin-bottom: -25vh !important;
  }
}

@media only screen and (min-width: 50em),
  all and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  /* full-heights */
  .full-height {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .full-height .home-content {
    align-items: center;
  }

  section.start-project {
    margin-bottom: 0;
  }

  .hide-mobile {
    display: inline;
  }

  .show-mobile {
    display: none;
  }

  footer .contact-us.show-mobile * {
    display: none !important;
  }

  footer .hide-mobile {
    display: block;
  }

  .hero-square-holder {
    position: absolute;
    z-index: 0;
    height: calc(100vh + 12vw);
    left: 0;
    right: 0;
    bottom: 0;
  }

  .hero h1 {
    position: relative;
    z-index: 1;
  }

  .the-media .home-content {
    z-index: 1;
  }

  .the-creators-page .member.paper-box {
    margin-bottom: 50vh;
  }

  .the-creators-page .member.paper-box:last-of-type {
    margin-bottom: 0;
  }
}

/* Mobile nav */
@media only screen and (max-width: 62em) {
  .hide-mobile {
    display: none;
  }

  .show-mobile {
    display: block;
  }

  header.mobile-show {
    position: fixed;
    z-index: 3;
    width: 100%;
  }

  header.mobile-show.slideDown {
    box-shadow: 0 3px 16px 0 var(--primary-color-dark);
  }

  header.slideDown .lang-switcher-dropdown {
    background-color: transparent;
    padding: 0;
  }

  header nav {
    text-align: left;
  }

  header nav ul {
    margin-top: 0;
  }

  main {
    background-color: var(--primary-color);
    padding-top: 80px;
  }

  .home main {
    padding-top: 0;
  }

  #menu-toggle {
    display: block;
    position: absolute;
    top: 6vw;
    right: 6vw;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
  }

  #menu-toggle input {
    display: block !important;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
    -webkit-touch-callout: none;
  }

  #menu-toggle span {
    display: block;
    width: 30px;
    height: 3px;
    margin-bottom: 4px;
    position: relative;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 3px;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
      background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
  }

  #menu-toggle span:first-child {
    transform-origin: 0% 0%;
  }

  #menu-toggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
  }

  #menu-toggle input:checked ~ span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -2px);
    background: var(--primary-color);
  }

  #menu-toggle input:checked ~ span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
  }

  #menu-toggle input:checked ~ span:nth-last-child(2) {
    opacity: 1;
    transform: rotate(-45deg) translate(0, 0);
  }

  .menu {
    position: absolute;
    width: 300px;
    margin: -100px 0 0 0;
    padding: 50px;
    padding-top: 125px;
    right: -60px;
    list-style-type: none;
    background-color: white;
    box-shadow: 0 0 300px var(--primary-color-dark);
    -webkit-font-smoothing: antialiased;
    transform-origin: 0% 0%;
    transform: translate(160%, 0);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  }

  html[lang="nl"] .menu {
    right: -46px;
    width: 308px;
  }

  .menu li {
    display: block;
    height: 51px;
    line-height: 51px;
  }

  .menu li a:not(.btn-primary) {
    padding: 14px 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
  }

  .menu li a.active:not(.btn-primary) {
    padding-bottom: 6px;
    border-bottom: 4px solid var(--secondary-color);
  }

  .menu li:nth-child(5) {
    margin: 6px 0;
  }

  #menu-toggle input:checked ~ ul {
    transform: scale(1, 1);
    opacity: 1;
  }

  header nav li .btn-primary {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--primary-color-dark);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
  }

  header nav li .lang-switcher:after {
    transform: translateY(-3px);
    border-width: 8px 5px 0 5px;
    border-color: var(--secondary-color) transparent transparent transparent;
  }

  .lang-switcher-dropdown {
    min-width: 220px;
    height: 40px;
    margin: 0;
    transform: translateX(-10px) translateY(-10px);
    overflow: hidden;
  }

  .lang-switcher-dropdown a {
    display: inline-block;
    line-height: 1em;
    margin-right: 1em;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  #menu-toggle input:checked ~ .menu li {
    opacity: 0;
    line-height: 3.4em;
  }

  #menu-toggle input ~ .menu {
    transition: transform 0.2s ease;
  }

  #menu-toggle input:checked ~ .menu {
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  }

  #menu-toggle input:checked ~ .menu li:nth-child(1) {
    -webkit-animation: swipeIn 0.5s cubic-bezier(0.09, 0.68, 0, 0.99) 0.2s;
    -webkit-animation-fill-mode: forwards;
    animation: swipeIn 0.5s cubic-bezier(0.09, 0.68, 0, 0.99) 0.2s;
    animation-fill-mode: forwards;
  }

  #menu-toggle input:checked ~ .menu li:nth-child(2) {
    -webkit-animation: swipeIn 0.5s cubic-bezier(0.09, 0.68, 0, 0.99) 0.3s;
    -webkit-animation-fill-mode: forwards;
    animation: swipeIn 0.5s cubic-bezier(0.09, 0.68, 0, 0.99) 0.3s;
    animation-fill-mode: forwards;
  }

  #menu-toggle input:checked ~ .menu li:nth-child(3) {
    -webkit-animation: swipeIn 0.5s cubic-bezier(0.09, 0.68, 0, 0.99) 0.4s;
    -webkit-animation-fill-mode: forwards;
    animation: swipeIn 0.5s cubic-bezier(0.09, 0.68, 0, 0.99) 0.4s;
    animation-fill-mode: forwards;
  }

  #menu-toggle input:checked ~ .menu li:nth-child(4) {
    -webkit-animation: swipeIn 0.5s cubic-bezier(0.09, 0.68, 0, 0.99) 0.5s;
    -webkit-animation-fill-mode: forwards;
    animation: swipeIn 0.5s cubic-bezier(0.09, 0.68, 0, 0.99) 0.5s;
    animation-fill-mode: forwards;
  }

  #menu-toggle input:checked ~ .menu li:nth-child(5) {
    -webkit-animation: swipeIn 0.5s cubic-bezier(0.09, 0.68, 0, 0.99) 0.6s;
    -webkit-animation-fill-mode: forwards;
    animation: swipeIn 0.5s cubic-bezier(0.09, 0.68, 0, 0.99) 0.6s;
    animation-fill-mode: forwards;
  }

  #menu-toggle input:checked ~ .menu li:nth-child(6) {
    -webkit-animation: swipeIn 0.5s cubic-bezier(0.09, 0.68, 0, 0.99) 0.7s;
    -webkit-animation-fill-mode: forwards;
    animation: swipeIn 0.5s cubic-bezier(0.09, 0.68, 0, 0.99) 0.7s;
    animation-fill-mode: forwards;
  }

  #menu-toggle input:checked ~ .menu li:nth-child(7) {
    -webkit-animation: swipeIn 0.5s cubic-bezier(0.09, 0.68, 0, 0.99) 0.8s;
    -webkit-animation-fill-mode: forwards;
    animation: swipeIn 0.5s cubic-bezier(0.09, 0.68, 0, 0.99) 0.8s;
    animation-fill-mode: forwards;
  }

  @keyframes swipeIn {
    0% {
      opacity: 0;
    }
    10% {
      opacity: 0;
      transform: translateX(3em);
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }

  .pack-features li:before,
  .pack-details li:before {
    width: 12px;
  }
}

/* ==========================================================================
   fonts
   ========================================================================== */

@media only screen and (max-width: 35em) {
  header .logo,
  header.is-transparent .logo {
    font-size: 7vw;
  }

  .hero h1,
  .the-media .hero h1,
  .the-media .hero .title {
    margin-bottom: 4vw;
    font-size: 14vw;
    line-height: 16vw;
  }

  .the-media .hero h1,
  .the-media .hero .title {
    line-height: 13vw;
  }

  .hero-topics h2,
  .hero-topics a,
  .hero-topics a:before,
  .hero-creators .title {
    font-size: 14vw;
    line-height: 13vw;
    margin-bottom: 0;
  }

  .hero-topics a,
  .hero-topics a:before {
    line-height: 15vw;
    margin-bottom: 0;
  }

  /* aristotelica */
  #the-studio .home-content h2,
  .start-project .title,
  .page-header h2,
  .home .workflow h2.title {
    font-size: 14vw;
    line-height: 13vw;
  }

  .page-header h3 a {
    font-size: 10.5vw;
    line-height: 14vw;
  }

  .pack-header h2 {
    font-size: 9.5vw;
    line-height: 9.5vw;
  }

  /* monteserrat */
  .home .price-packs h2,
  .complete-packages h2,
  .paper-box h2,
  .notice .title,
  .service-item h3 {
    font-size: 7vw;
    line-height: 10vw;
  }

  .title,
  .paper-box .title,
  .feature-text h3,
  .member-bio h3,
  .pack-feature h4,
  .pack-about h3,
  .workflow-item-text h4 {
    font-size: 5.5vw;
    line-height: 8vw;
  }

  .btn,
  .btn.btn-primary,
  .btn.btn-secondary,
  p,
  .text,
  .hero-text,
  .the-media .hero-text,
  .service-text p,
  .pack-features,
  .pack-details ul,
  .pack-details h4,
  .approach-page .workflow-item-text p,
  .start-project form input:not(.btn),
  .start-project form select,
  .start-project form textarea {
    font-size: 4vw;
    line-height: 6vw;
  }

  footer ul li,
  footer ul a,
  footer .btn {
    font-size: 4.5vw;
    line-height: 6vw;
  }

  footer h4,
  footer h4 .btn {
    font-size: 5.25vw;
    line-height: 7.54vw;
  }

  .pack-features {
    line-height: 8vw;
  }

  .pack-title {
    font-size: 5.5vw;
    line-height: 8vw;
  }

  .pack-price {
    font-size: 12vw;
    line-height: 13vw;
  }

  .pack-overview .pack-price {
    font-size: 8vw;
    line-height: 10vw;
  }

  .pack-overview .pack-price p {
    font-size: 3vw;
    line-height: 3vw;
  }

  .start-project .title,
  .start-project-top h2,
  .pack-header,
  .pack-overview .pack-price {
    text-align: center;
  }

  .btn-arrow {
    font-size: 3.7vw;
  }

  /* layout */
  header a {
    padding: 0;
  }

  header .logo {
    padding: 5vw 6vw 2vw calc(6vw - 16px);
  }

  footer {
    padding-bottom: 6vw;
  }

  footer h4 {
    margin-top: 0;
    margin-bottom: 22vw;
  }

  footer h4 a {
    margin-top: 1.5vw;
  }

  footer .logo {
    font-size: 6.5vw;
  }

  .footer-right .footer-top ul.contact-us,
  .footer-bottom ul.social-links {
    margin-top: 18vw;
    margin-bottom: 0;
  }

  .footer-right .site-map,
  .footer-right .footer-top ul.address li:first-of-type {
    display: none;
  }

  .footer-right ul li {
    padding: 1.5vw 0;
  }

  .footer-right .footer-top ul.contact-us li:first-of-type {
    font-weight: bold;
  }

  .footer-bottom ul.social-links {
    display: flex;
    justify-content: space-between;
  }
  .btn,
  .btn.btn-primary,
  .btn.btn-secondary {
    text-transform: none;
  }

  .btn.btn-primary:after,
  .btn.btn-secondary:after,
  .btn-transparent:after {
    width: 4vw;
    height: 6vw;
    top: 1px;
  }

  .home .hero .hero-text {
    margin: 3vh 0 6vh;
  }

  /* aristotelica */
  #the-studio .home-content h2,
  .start-project .title,
  .home .workflow h2.title {
    margin-bottom: 6vw;
  }

  .page-header h2 {
    margin-bottom: 12vw;
  }

  .the-media-page .page-header .btn-arrow {
    margin-top: 12vw;
  }

  .the-media .hero.is-sticky-top {
    margin-bottom: 16vw;
    padding-top: 16vw;
  }

  .the-media .hero .btn {
    margin: 6vw 0;
  }

  /* monteserrat */
  .home .price-packs h2,
  .complete-packages h2,
  .paper-box h2,
  .notice .title,
  .service-item h3 {
    margin-bottom: 6vw;
  }

  .start-project,
  .packs-slider {
    height: auto;
  }

  .hero-square {
    transform: scale(2, 1);
  }

  .hero-text {
    z-index: 1;
    position: relative;
  }

  .the-media .hero-text {
    text-align: left;
  }

  .service-list {
    padding-top: 0;
    padding-bottom: 0;
  }

  section.services-list.bg-white,
  .service-item {
    background: white !important;
  }

  .service-item {
    box-shadow: none;
  }

  .hero-creators .btn-arrow {
    margin: 7.5vw 0;
    position: relative;
    z-index: 1;
  }

  .notice-creators .title {
    font-size: 6vw;
    line-height: 9vw;
  }

  .member {
    display: flex;
    flex-direction: column;
  }

  .member-bio h3 {
    margin-top: 12vw;
  }

  .member-photo {
    order: 1;
    width: 70vw;
    height: 70vw;
    margin: auto !important;
    border-radius: 50%;
  }

  .member-bio {
    order: 2;
  }

  .workflow h2.is-sticky {
    top: 24vw;
    margin-bottom: 6vw;
  }

  html[lang="pt"] .workflow h2.is-sticky {
    margin-left: 2vw;
  }

  .workflow-scroll .workflow-item {
    margin-bottom: 70vw;
  }

  .home .workflow-image {
    height: 58vw;
  }

  .home .mobile-slider {
    height: 120vw;
  }

  .home .mobile-slider .workflow-image {
    border-radius: 8px;
  }
  .home .mobile-slider .workflow-item-text {
    transform: translateY(10px) !important;
  }

  .home .mobile-slider h3 span {
    font-size: 20vw;
  }

  .home .mobile-slider .workflow-item-text h4 {
    font-size: 5vw;
    line-height: 6.5vw;
  }

  .home .mobile-slider .workflow-item-text .hero-text {
    font-size: 3.5vw;
  }
  .workflow-scroll .workflow-image {
    box-shadow: -60px 210px 80px var(--primary-color),
      60px 210px 80px var(--primary-color);
  }

  .approach-page .workflow-item-text {
    margin-top: -16vw;
  }

  .the-creators-page section.bg-transparent {
    background-color: white;
  }

  .the-creators-page .hero .title {
    text-align: center;
  }

  .the-creators-page .hero {
    padding-bottom: 50vw;
  }

  .the-creators-page .paper-box {
    position: relative;
    box-shadow: none;
    margin-bottom: 0 !important;
    padding-top: 15vh;
  }

  .the-creators-page .paper-box:before {
    content: "";
    height: 34vh;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    right: 0;
    background: white;
  }

  .the-creators-page .member-photo {
    z-index: 1;
  }

  .the-creators-page .notice .title {
    margin-top: 3vw;
    margin-bottom: 15vw;
  }

  .creators-social-links {
    justify-content: flex-end;
  }

  .creators-social-links li {
    margin-right: 4vw;
  }

  .creators-social-links li a {
    padding: 3.5vw;
    color: white;
    border: 6px solid var(--primary-color);
    background-color: var(--primary-color);
    border-radius: 50%;
    background-size: 80%;
  }

  .icon-website {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='26' viewBox='0 0 24 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.4551 6.60771L22.3406 6.39612C20.2625 2.57656 16.387 0 11.9551 0C7.52295 0 3.64746 2.57656 1.56958 6.39612L1.45508 6.60771C0.653564 8.14818 0.143555 9.88254 0 11.7262V13.8583C0.143555 15.7019 0.653564 17.4363 1.45508 18.9762L1.56958 19.1884C3.64746 23.0079 7.52295 25.5845 11.9551 25.5845C16.387 25.5845 20.2625 23.0079 22.3406 19.1884L22.4551 18.9762C23.2566 17.4358 23.7666 15.7019 23.9099 13.8583V11.7262C23.7666 9.88254 23.2566 8.14818 22.4551 6.60771ZM17.9346 11.7262C17.895 10.6063 17.7939 9.53562 17.637 8.52816H21.114C21.5239 9.52495 21.7986 10.5988 21.9041 11.7262H17.9346ZM11.9551 23.4524C10.8245 23.4524 9.61694 21.8102 8.82739 19.1884H15.083C14.293 21.8102 13.0854 23.4524 11.9551 23.4524ZM8.31958 17.0563C8.14355 16.0686 8.02441 14.9951 7.97803 13.8583H15.9319C15.8855 14.9951 15.7666 16.0686 15.5906 17.0563H8.31958ZM7.97803 11.7262C8.02441 10.5894 8.14355 9.51584 8.31958 8.52816H15.5906C15.7666 9.51584 15.8855 10.5894 15.9319 11.7262H7.97803ZM11.9551 2.13204C13.0854 2.13204 14.293 3.77479 15.0825 6.39612H8.82739C9.61694 3.77479 10.8245 2.13204 11.9551 2.13204ZM19.936 6.39612H17.2004C16.863 5.09561 16.4226 3.94969 15.8989 2.99922C17.5085 3.73914 18.8936 4.92175 19.936 6.39612ZM8.01147 2.99922C7.48755 3.94969 7.04712 5.09561 6.70947 6.39612H3.97412C5.0166 4.92175 6.40161 3.73914 8.01147 2.99922ZM2.7959 8.52816H6.27295C6.11646 9.53562 6.01489 10.6063 5.97559 11.7262H2.00562C2.11108 10.5988 2.3855 9.52495 2.7959 8.52816ZM5.97559 13.8583C6.01489 14.9781 6.11597 16.0489 6.27295 17.0563H2.7959C2.38599 16.0595 2.11157 14.9857 2.0061 13.8583H5.97559ZM3.97412 19.1884H6.70947C7.04712 20.4889 7.48755 21.6348 8.01099 22.5853C6.40161 21.8453 5.0166 20.6627 3.97412 19.1884ZM15.8984 22.5853C16.4226 21.6348 16.863 20.4889 17.2 19.1884H19.9355C18.8936 20.6627 17.5085 21.8453 15.8984 22.5853ZM21.1145 17.0563H17.6375C17.7939 16.0489 17.8955 14.9781 17.9351 13.8583H21.905C21.7991 14.9857 21.5244 16.0595 21.1145 17.0563Z' fill='%23ffffff'/%3E%3C/svg%3E%0A");
  }
  .icon-instagram {
    background-image: url("data:image/svg+xml,%3Csvg width='25' height='26' viewBox='0 0 25 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.1468 25.5845C13.0674 25.5845 12.9879 25.5845 12.9079 25.5841C11.0266 25.589 9.28828 25.538 7.59779 25.4283C6.04793 25.3278 4.6332 24.7568 3.50632 23.7774C2.419 22.8322 1.67648 21.5543 1.29945 19.9795C0.971316 18.6084 0.95392 17.2625 0.937257 15.9608C0.925171 15.0268 0.91272 13.92 0.910156 12.7945C0.91272 11.6644 0.925171 10.5576 0.937257 9.62361C0.95392 8.32205 0.971316 6.97618 1.29945 5.60494C1.67648 4.03011 2.419 2.75217 3.50632 1.80704C4.6332 0.827553 6.04793 0.256609 7.59797 0.156084C9.28847 0.0465797 11.0271 -0.00456125 12.9124 0.000318613C14.7943 -0.00397567 16.532 0.0465797 18.2225 0.156084C19.7724 0.256609 21.1871 0.827553 22.314 1.80704C23.4015 2.75217 24.1438 4.03011 24.5209 5.60494C24.849 6.97599 24.8664 8.32205 24.8831 9.62361C24.8951 10.5576 24.9078 11.6644 24.9102 12.7899V12.7945C24.9078 13.92 24.8951 15.0268 24.8831 15.9608C24.8664 17.2624 24.8492 18.6082 24.5209 19.9795C24.1438 21.5543 23.4015 22.8322 22.314 23.7774C21.1871 24.7568 19.7724 25.3278 18.2225 25.4283C16.6036 25.5333 14.9406 25.5845 13.1468 25.5845ZM12.9079 23.5853C14.7586 23.59 16.4579 23.5402 18.1086 23.4332C19.2805 23.3573 20.2966 22.9519 21.1291 22.2283C21.8985 21.5594 22.4284 20.6365 22.704 19.4852C22.9772 18.3439 22.993 17.1185 23.0082 15.9335C23.0201 15.0057 23.0325 13.9068 23.0351 12.7922C23.0325 11.6774 23.0201 10.5787 23.0082 9.65093C22.993 8.46591 22.9772 7.24048 22.704 6.09898C22.4284 4.94772 21.8985 4.02484 21.1291 3.35591C20.2966 2.63252 19.2805 2.2271 18.1086 2.15117C16.4579 2.04401 14.7586 1.99462 12.9123 1.99892C11.0619 1.99423 9.36244 2.04401 7.71169 2.15117C6.53977 2.2271 5.52367 2.63252 4.69125 3.35591C3.92181 4.02484 3.39188 4.94772 3.1163 6.09898C2.84309 7.24048 2.82734 8.46571 2.81215 9.65093C2.80024 10.5795 2.78779 11.679 2.78523 12.7945C2.78779 13.9052 2.80024 15.0049 2.81215 15.9335C2.82734 17.1185 2.84309 18.3439 3.1163 19.4852C3.39188 20.6365 3.92181 21.5594 4.69125 22.2283C5.52367 22.9517 6.53977 23.3571 7.71169 23.433C9.36244 23.5402 11.0623 23.5902 12.9079 23.5853ZM12.8632 19.0384C9.63235 19.0384 7.00359 16.2364 7.00359 12.7922C7.00359 9.34799 9.63235 6.54597 12.8632 6.54597C16.0942 6.54597 18.7228 9.34799 18.7228 12.7922C18.7228 16.2364 16.0942 19.0384 12.8632 19.0384ZM12.8632 8.54477C10.6662 8.54477 8.87866 10.4503 8.87866 12.7922C8.87866 15.1341 10.6662 17.0396 12.8632 17.0396C15.0604 17.0396 16.8477 15.1341 16.8477 12.7922C16.8477 10.4503 15.0604 8.54477 12.8632 8.54477ZM19.3791 4.54718C18.6025 4.54718 17.9728 5.21826 17.9728 6.04628C17.9728 6.87429 18.6025 7.54537 19.3791 7.54537C20.1558 7.54537 20.7854 6.87429 20.7854 6.04628C20.7854 5.21826 20.1558 4.54718 19.3791 4.54718Z' fill='%23ffffff'/%3E%3C/svg%3E%0A");
  }
  .icon-twitter {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='21' viewBox='0 0 24 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 2.64581C23.1013 3.07036 22.1168 3.32236 21.1406 3.44534C22.1686 2.78928 22.9294 1.76255 23.2969 0.547058C22.3303 1.15841 21.3126 1.61459 20.2099 1.84629C19.257 0.766068 17.9767 0.197266 16.6875 0.197266C15.4219 0.197266 14.2126 0.652269 13.2431 1.62435C12.2426 2.62727 11.6739 4.01472 11.6719 5.44415C11.6713 5.84196 11.7321 6.24289 11.8185 6.63973C7.85944 6.42813 4.18781 4.426 1.6875 1.1467C1.23431 1.97843 0.983826 2.89703 0.984375 3.79513C0.985474 5.4867 1.77411 7.13631 3.1875 8.14254C2.40381 8.11775 1.62231 7.94989 0.9375 7.5429V7.63855C0.938232 10.1373 2.62427 12.195 4.92188 12.6898C4.51593 12.8079 3.9895 12.8915 3.56671 12.8915C3.56525 12.8915 3.56378 12.8915 3.5625 12.8915C3.23199 12.8909 2.90149 12.8562 2.57812 12.7898C3.22321 14.9282 5.20587 16.4954 7.3125 16.5376C5.56897 17.9984 2.85938 18.6863 1.17224 18.6863C0.780396 18.6855 0.388916 18.6859 0 18.6363C2.24652 20.1731 4.8598 20.9849 7.52875 20.9849H7.54742V20.989C16.5469 20.989 21.5625 12.9879 21.5625 6.05121C21.5625 5.824 21.5301 5.56927 21.5156 5.34421C22.4793 4.60109 23.3388 3.69987 24 2.64581ZM18.8839 10.6059C18.3316 12.1663 17.538 13.5764 16.5253 14.7972C15.4514 16.0915 14.1793 17.1077 12.7449 17.8173C11.2689 18.5473 9.63885 18.9396 7.89514 18.9855L7.54413 18.9861H7.52875C7.42731 18.9861 7.32605 18.9847 7.22498 18.982C7.66608 18.7224 8.08594 18.4317 8.47101 18.1091C9.4389 17.1507 9.87085 15.9365 10.0312 14.5928C10.0312 14.5928 9.24225 14.6951 8.34375 14.6887C7.64758 14.6836 6.88586 14.6227 6.3739 14.3394C7.64795 13.7289 8.31757 12.7166 8.59003 11.4406C7.5 11.5405 4.96875 10.9409 4.06073 10.1699C5.0625 9.79156 6 8.99204 6.375 8.34243C6.375 8.34243 4.59375 7.44296 3.33636 5.51461C5.77863 7.3723 8.68707 8.47379 11.7248 8.636L14.2031 8.74219L13.6904 6.39671L13.5947 5.93155C13.5624 5.74299 13.5467 5.58313 13.5469 5.44708C13.548 4.56674 13.9056 3.70397 14.5276 3.08032C15.1128 2.49356 15.8395 2.19608 16.6875 2.19608C17.3139 2.19608 17.9324 2.42446 18.4459 2.83554C19.2656 3.59525 19.6875 4.59465 19.6875 6.05121C19.6875 7.54583 19.4095 9.12087 18.8839 10.6059Z' fill='%23ffffff'/%3E%3C/svg%3E%0A");
  }
  .icon-linkedin {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath d='M7.50037 19.8281H4.21912V9.23438H7.50037V19.8281ZM7.82776 5.85919C7.82776 4.79846 6.96716 3.9375 5.90698 3.9375C4.84277 3.9375 3.98438 4.79846 3.98438 5.85919C3.98438 6.92029 4.84277 7.78125 5.90698 7.78125C6.96716 7.78125 7.82776 6.92029 7.82776 5.85919ZM19.7812 13.9999C19.7812 11.1561 19.1805 9.04688 15.8584 9.04688C14.2621 9.04688 13.1906 9.84521 12.7531 10.6754H12.75V9.23438H9.5625V19.8281H12.75V14.5682C12.75 13.1907 13.1006 11.8563 14.8081 11.8563C16.4923 11.8563 16.5469 13.4315 16.5469 14.6558V19.8281H19.7812V13.9999ZM24 21.1875V2.8125C24 1.2616 22.7384 0 21.1875 0H2.8125C1.2616 0 0 1.2616 0 2.8125V21.1875C0 22.7384 1.2616 24 2.8125 24H21.1875C22.7384 24 24 22.7384 24 21.1875ZM21.1875 1.875C21.7044 1.875 22.125 2.29559 22.125 2.8125V21.1875C22.125 21.7044 21.7044 22.125 21.1875 22.125H2.8125C2.29559 22.125 1.875 21.7044 1.875 21.1875V2.8125C1.875 2.29559 2.29559 1.875 2.8125 1.875H21.1875Z' fill='%23ffffff'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='24' height='24' fill='%23ffffff' /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
  }

  .price-packs-page .pack,
  .pack-details,
  .home .pack {
    padding: 12vw;
  }

  .home .workflow {
    padding-right: 0;
    padding-left: 0;
    overflow: hidden;
  }

  .workflow h2 {
    margin-left: 6vw;
  }

  .pack-details {
    padding: 0;
    background: none;
    box-shadow: none;
  }

  .pack-details ul li {
    font-size: 3.75vw;
    line-height: 8vw;
    margin-left: 1.2em;
    font-weight: 400;
  }

  .pack-details ul li:last-of-type {
    margin-bottom: 0;
  }

  .pack-overview .pack-price,
  .pack-overview .pack-details h4 {
    margin: 0;
  }

  .pack-overview .pack-price {
    margin-bottom: 12vw;
  }

  .pack-overview .pack-price span {
    -webkit-text-stroke: 0.2px;
  }

  .pack-overview .pack-details {
    margin-bottom: 12vw;
  }

  .pack-overview .pack-feature {
    margin-bottom: 0.7em;
  }

  .pack-overview .pack-feature.inactive ul {
    display: none;
  }

  .pack-overview .pack-feature.active ul {
    position: relative;
    z-index: -1;
    top: -1vw;
    box-shadow: 0 0 10px 2px rgba(50, 50, 205, 0.7);
  }

  .pack-overview .pack-feature h4 {
    padding: 6vw;
    line-height: 3vw;
    border-radius: 10px;
    background: var(--primary-color-packs);
    box-shadow: 0 0 10px 2px rgba(50, 50, 205, 0.7);
  }

  .pack-overview .pack-feature h4:after {
    content: "";
    display: block;
    float: right;
    width: 6vw;
    height: 6vw;
    border-radius: 50%;
    transition: 300ms ease;
    background-image: url('data:image/svg+xml;utf8,<svg width="18" height="11" viewBox="0 0 18 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.75598 1L8.28671 9.04379C8.68691 9.53671 9.43919 9.53671 9.83939 9.04379L16.3701 1" stroke="%233be9de" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-position: 50% 55%;
    background-repeat: no-repeat;
    background-size: 55%;
    position: relative;
    top: -1.5vw;
    right: -1.5vw;
  }

  .pack-overview .pack-feature.active h4:after {
    background-color: var(--secondary-color);
    background-image: url('data:image/svg+xml;utf8,<svg width="18" height="11" viewBox="0 0 18 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.75598 1L8.28671 9.04379C8.68691 9.53671 9.43919 9.53671 9.83939 9.04379L16.3701 1" stroke="%234C4AE4" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    transform: rotate(180deg);
    padding: 1px;
  }

  .pack-overview .pack-feature.inactive h4:after {
    border: 1px solid var(--secondary-color);
  }

  .pack-overview .pack-feature ul {
    padding: 6vw;
    background: rgba(90, 88, 255, 0.6);
    border-radius: 0 0 10px 10px;
    letter-spacing: 0;
  }

  .pack-overview .pack-details li:before {
    width: 10px;
    margin-left: -1.2em;
  }

  #branding .tns-nav {
    transform: translateY(87%);
    z-index: 1;
  }

  html[lang="pt"] #the-studio .title {
    width: 85%;
  }
  html[lang="pt"] #the-studio .text {
    width: 96%;
  }
  html[lang="pt"] .home .price-packs h2 {
    width: 90%;
  }
  html[lang="nl"] .home .price-packs .pack:last-child .pack-title .btn-plus {
    margin-top: -4vw;
  }
  html[lang="en"] .home .mobile-slider .workflow-item-text .hero-text,
  html[lang="nl"] .home .mobile-slider .workflow-item-text .hero-text,
  html[lang="pt"] .home .mobile-slider .workflow-item-text .hero-text {
    font-size: 3.4vw;
  }
  html[lang="pt"] .complete-packages h2 {
    width: 80%;
  }
}

@media only screen and (min-width: 52em),
  all and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  header .logo {
    padding-top: 48px;
    padding-left: 6vw;
  }

  header nav {
    padding-right: 6vw;
  }

  header nav li {
    margin-right: 2.4vw;
  }

  header nav li a {
    font-size: 1vw;
    -webkit-text-stroke-width: 0.12px;
    letter-spacing: 0.5px;
  }

  header nav li a.btn-primary {
    font-weight: bold;
    letter-spacing: 0.75px;
    position: relative;
    top: 0;
  }

  header nav li a.btn-primary:hover,
  header nav li a.btn-primary:focus {
    background-color: var(--secondary-color);
    box-shadow: 0 12px 24px rgba(50, 50, 205, 1);
    top: -2px;
  }

  section {
    padding: 25vh 12.5vw;
  }

  footer {
    padding: 15vh 15vw;
  }

  .page-header {
    padding-bottom: 12.5vh;
  }

  .home .workflow {
    overflow: hidden;
  }

  .home .workflow.show-mobile {
    padding-left: 0;
    padding-right: 0;
  }

  .home .workflow.show-mobile .mobile-slider {
    padding-top: 6vw;
  }

  .approach-page .page-header .hero-text {
    width: 72%;
    font-size: 1.01vw;
    line-height: 1.72vw;
  }

  .approach-page .workflow-scroll .workflow-item:last-of-type {
    margin-bottom: 0;
  }

  /* layout */
  .home-content {
    display: grid;
    grid-template-columns: auto auto;
    margin: auto;
    width: 70vw;
  }

  .home-left {
    margin-right: 6vw;
    width: 26vw;
  }

  .home-right,
  .hero-video {
    width: 38vw;
  }

  html[lang="nl"] .hero-creators .home-left {
    width: 29vw;
  }
  .hero-creators h2 {
    padding-bottom: 10%;
  }
  .hero-creators img {
    box-shadow: 0px 0px 60px rgba(50, 50, 205, 0.74);
  }

  .home .hero .home-content:first-of-type {
    margin-top: 6vh;
    margin-bottom: 2vh;
  }

  .home .hero .home-content:last-of-type {
    margin-top: 2vh;
  }

  .home-content .hero-text {
    width: 90%;
  }

  html[lang="nl"] .home-content .hero-text,
  html[lang="pt"] .home-content .hero-text {
    width: 100%;
  }

  .home-right p {
    width: 82%;
  }

  .home .workflow h2.title {
    margin-bottom: -10vh;
    padding-left: 8vw;
  }

  .home .slider__item:nth-child(even) {
    margin-top: 15vh;
  }

  .home .workflow-image,
  .approach-page .workflow-image {
    height: 46vh;
    max-height: 34vw;
  }

  .home .workflow-image {
    height: 36vh;
  }

  .page-header .hero-text {
    width: 80%;
  }

  /* fonts */
  /* aristotelica */
  .hero h1,
  #the-studio .home-content h2,
  .start-project .title {
    font-size: 4.3vw;
    line-height: 4.6vw;
  }

  .start-project .title {
    margin-bottom: 0;
  }

  .page-header h2,
  .home .workflow h2.title {
    font-size: 5vw;
    line-height: 5vw;
  }

  .pack-header {
    /* margin-top: -5vw; */
    padding-bottom: 2.5vw;
  }

  .pack-header h2 {
    font-size: 6.2vw;
    /* padding-top: 5.8vw; */
    padding-right: 2vw;
  }

  .media-text-line a {
    font-size: 9vw;
  }
  .marquee .inner {
    height: 8.5vw;
  }

  /* monteserrat */
  .home .price-packs h2,
  .complete-packages h2,
  .paper-box h2,
  .notice .title,
  .service-item h3 {
    font-size: 2vw;
    line-height: 2.65vw;
  }

  .title,
  .paper-box .title,
  .workflow-item-text h4 {
    font-size: 1.4vw;
    line-height: 2vw;
    margin-bottom: 2vw;
  }

  .pack-about h3 {
    font-size: 1.6vw;
  }

  .btn,
  .btn-arrow,
  .btn.btn-primary,
  .btn.btn-secondary,
  p,
  .text,
  .service-text p,
  .pack-features,
  .pack-details ul,
  .pack-details h4,
  .approach-page .workflow-item-text p,
  .start-project form input:not(.btn),
  .start-project form select,
  .start-project form textarea {
    font-size: 0.9vw;
    line-height: 1.6vw;
  }

  .workflow-item-text p {
    -webkit-text-stroke-width: 0;
  }

  .hero-text,
  .the-media .hero-text {
    font-size: 1.1vw;
    line-height: 2vw;
  }

  .pack-feature h4 {
    font-size: 1.2vw;
    line-height: 2vw;
  }

  .pack-details ul {
    font-size: 0.875vw;
  }

  .workflow h3 span {
    font-size: 5.6vw;
  }

  .pack-features {
    line-height: 2vw;
  }

  .feature-text h3,
  .pack-overview .pack-price span,
  .paper-box h3 {
    font-size: 1.2vw;
  }

  .pack-highlight h3 {
    font-size: 1.68vw;
    margin-bottom: 1.68vw;
    letter-spacing: 0 !important;
  }

  .pack-title {
    font-size: 1.05vw;
  }

  .pack-price {
    font-size: 2.9vw;
  }

  .start-project .title,
  .start-project-top h2,
  .pack-header,
  .pack-overview .pack-price {
    font-size: 4.8vw;
  }
  .home-left {
    text-align: right;
  }

  .home .workflow .slider {
    top: 12.5vh;
  }

  .home .price-packs .home-right {
    display: flex;
  }

  .home .price-packs .pack {
    margin-right: 0.5vw;
  }

  .home .price-packs .pack:last-of-type {
    margin-right: -3vw;
  }

  .home .price-packs .pack.active {
    width: 23.5vw;
    padding: 4vw;
  }

  .home .price-packs .pack.inactive {
    width: auto;
    padding: 4vw 1.5vw;
  }

  .the-media section.bg-transparent {
    padding: 0 10vw;
    margin-top: -10vh;
  }

  .the-media .hero h1,
  .the-media .hero .title,
  .the-media .hero-topics a,
  .the-media .hero-topics a:before {
    font-size: 4.8vw;
    line-height: 5vw;
  }

  .the-media .hero h2.title {
    font-size: 4.2vw;
    line-height: 4.4vw;
  }

  .hero-topics a:before {
    height: 5vw;
  }

  .the-media .hero-text {
    margin-top: 5vh;
    margin-bottom: -17.5vh;
  }

  .web-page .hero-content {
    grid-template-columns: 28% 62%;
  }

  html[lang="pt"] .web-page .hero-content {
    grid-template-columns: 20% 70%;
  }

  .design-page .hero-text {
    width: 60%;
  }
  .web-page .hero-text {
    width: 65%;
  }
  .online-advertising-page .hero-text {
    width: 70%;
  }
  html[lang="pt"] .design-page .hero-text {
    width: 65%;
  }
  html[lang="nl"] .design-page .hero-text,
  html[lang="nl"] .web-page .hero-text,
  html[lang="pt"] .web-page .hero-text {
    width: 77%;
  }
  html[lang="nl"] .online-advertising-page .hero-text,
  html[lang="pt"] .online-advertising-page .hero-text {
    width: 85%;
  }

  #development .paper-box {
    margin-bottom: 50vh;
  }

  .the-media .hero h1,
  .the-media .hero .title {
    margin: 0;
  }

  .paper-box h2,
  .service-item h3 {
    padding-right: 4vw;
  }

  .service-item {
    margin: 2em 0 50vh;
    padding: 7vw 7vw 5.5vw;
  }

  .notice .title {
    padding-right: 7vw;
  }

  .paper-box-color {
    grid-gap: 4vw 6vw;
    margin-bottom: 50vh;
    padding: 7vw 7vw 5vw;
  }

  .service-image .tns-outer {
    margin-bottom: -40vh;
  }

  .service-image-gallery picture {
    position: relative;
    height: 40vh;
  }

  .notice {
    padding: 25vh 17vw;
  }

  .page-header {
    grid-template-columns: 3fr 4fr;
  }

  .approach-page .workflow {
    padding-top: 7.5vw;
  }

  .approach-page .workflow h2 {
    font-size: 6.7vw;
    line-height: 6.7vw;
  }

  html[lang="pt"] .approach-page .workflow h2 {
    font-size: 5.45vw;
    line-height: 5.45vw;
  }
  .approach-page .workflow-item-text h4 {
    padding-top: 0;
    margin-bottom: -0.5vw;
  }

  .approach-page .workflow-item-text p {
    width: 84%;
  }

  .complete-packages {
    padding-left: 12.5vw;
  }

  .online-advertising-page .service-image {
    width: calc(100% + 12.5vw);
    height: 120%;
  }

  .price-packs .pack {
    padding: 3.5vw;
    min-height: 428px;
  }

  .price-packs-page .price-packs-content .btn-plus {
    margin-bottom: -6vw;
    position: relative;
    top: -3.8vw;
    right: -3.4vw;
  }

  .price-packs-page .packs-slider-section .pack {
    padding: 3.25vw;
  }

  .price-packs-page .packs-slider-section .btn-plus {
    bottom: -1vw;
  }

  .home .pack .more-info {
    bottom: 3vw;
  }

  .the-media article {
    padding-top: 5vw;
    margin-top: -10vw;
  }

  /* bubbles */
  .the-media article {
    position: relative;
  }
  .price-packs-page .bubble {
    right: 4vw;
    margin-top: 12vw;
    zoom: 0.5;
  }
  .price-packs-page .price-packs-content .bubble {
    top: -30px;
  }
}

@media all and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .home .hero .home-content:first-of-type {
    margin-top: 0;
  }
}

/* laptops */
@media only screen and (min-width: 52em) and (max-width: 84em),
  all and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  p:not(.hero-text) {
    letter-spacing: 0;
  }

  header nav li a {
    font-size: 0.9vw;
  }

  section,
  footer,
  .the-media section.bg-transparent {
    padding-right: 6vw;
    padding-left: 6vw;
  }

  .notice {
    padding-right: 12.5vw;
    padding-left: 12.5vw;
  }

  header .logo {
    padding-right: 0;
    padding-left: calc(6vw - 16px);
  }

  /* layout */

  .home-content {
    width: 83vw;
  }

  .home-left {
    width: 30vw;
  }

  .home-right,
  .hero-video {
    width: 47vw;
  }

  .hero-text,
  .home-right p,
  .page-header .hero-text,
  .approach-page .page-header .hero-text {
    width: 96%;
  }

  /* fonts */
  /* aristotelica */
  .hero h1,
  #the-studio .home-content h2,
  .start-project .title,
  .page-header h2,
  .home .workflow h2.title {
    font-size: 5.75vw;
    line-height: 5.6vw;
  }

  .media-text-line a {
    font-size: 9vw;
  }
  .marquee .inner {
    height: 9vw;
  }

  /* monteserrat */
  .home .price-packs h2,
  .complete-packages h2,
  .paper-box h2,
  .notice .title,
  .service-item h3 {
    font-size: 2.2vw;
    line-height: 3vw;
  }

  .title,
  .paper-box .title,
  .pack-feature h4,
  .workflow-item-text h4,
  .pack-about h3 {
    font-size: 2.2vw;
    line-height: 3vw;
    margin-bottom: 2.2vw;
  }

  .btn,
  .btn-arrow,
  .btn.btn-primary,
  .btn.btn-secondary,
  .btn.btn-transparent,
  p,
  .text,
  .service-text p,
  .pack-features,
  .pack-details ul,
  .pack-details h4,
  .approach-page .workflow-item-text p,
  .start-project form input:not(.btn),
  .start-project form select,
  .start-project form textarea {
    font-size: 1.1vw;
    line-height: 2vw;
  }

  .hero-text,
  .the-media .hero-text {
    font-size: 1.4vw;
    line-height: 2.4vw;
  }

  .workflow h3 span {
    font-size: 8.8vw;
  }

  .home .price-packs .pack.active {
    width: 28vw;
    padding: 4vw;
  }

  .home .price-packs .pack.inactive {
    width: auto;
    padding: 3vw 1.25vw;
  }

  .home .price-packs .pack {
    margin-right: 1vw;
  }

  .pack-features {
    line-height: 2.4vw;
  }

  .pack-title,
  .feature-text h3,
  .paper-box h3 {
    font-size: 1.2vw;
  }

  .pack-price {
    font-size: 2.9vw;
  }

  .pack-feature h4 {
    font-size: 1.6vw;
    line-height: 2vw;
  }

  .pack-details ul {
    font-size: 1.1vw;
  }

  .slider__item {
    width: 60vw;
    flex: 0 0 60vw;
  }

  .paper-box h2,
  .service-item h3 {
    padding-right: 4vw;
  }

  .notice .title {
    padding-right: 7vw;
  }

  .paper-box-color {
    grid-gap: 4vw 6vw;
    margin-top: 50vh;
    margin-bottom: 50vh;
    padding: 7vw 7vw 5vw;
  }

  .pack-highlight-icons,
  .pack-highlight-text {
    margin-right: 0;
  }

  .pack-about {
    grid-gap: 1vw 10vw;
    margin-bottom: 2vw;
  }

  .price-packs-page .pack.info p {
    margin-top: 3vw;
    margin-bottom: 3vw;
  }

  .price-packs-page .start-project {
    padding: 12vw 6vw;
    margin-top: -12vw;
  }
  .price-packs-page .start-project .title,
  .price-packs-page .start-project form {
    width: 65%;
  }

  .price-packs-page .start-project form {
    display: block;
  }

  .price-packs-page .start-project-top {
    margin-top: 1vw;
  }

  .price-packs-page .packs-slider-section .pack-features {
    font-size: 1.3vw;
  }

  .approach-page .workflow {
    padding-top: 5vh;
  }
}

@media only screen and (min-width: 62em) and (max-width: 64em) {
  header .logo {
    width: 280px;
    font-size: 28px !important;
  }

  header nav li .btn-primary {
    letter-spacing: 0 !important;
  }

  header nav li a {
    letter-spacing: 0 !important;
    font-size: 12px !important;
  }
}

@media only screen and (min-width: 52em) and (max-width: 64em) {
  header nav li a {
    font-size: 1.2vw;
  }
}

@media only screen and (min-width: 64em) and (max-width: 80em) {
  header nav li a {
    font-size: 1.1vw;
  }
}

@media only screen and (min-width: 80em) and (max-width: 94em) {
  header nav li a {
    font-size: 0.8vw;
  }
}

@media only screen and (min-width: 52em) and (max-width: 80em) {
  .pack-title,
  .feature-text h3,
  .paper-box h3 {
    font-size: 1.3vw;
  }

  .title,
  .paper-box .title,
  .pack-feature h4,
  .workflow-item-text h4,
  .pack-about h3 {
    font-size: 2vw;
    line-height: 2.8vw;
    margin-bottom: 2.2vw;
  }

  .slider__items .workflow-item-text h4 {
    padding-top: 3.6em;
  }

  .web-page .service-image {
    width: calc(100% + 18em) !important;
    left: 0;
    margin-top: 25vw;
    margin-bottom: -25vw;
  }
}

@media only screen and (min-width: 80em) and (max-width: 90em) {
  .pack-title,
  .feature-text h3,
  .paper-box h3 {
    font-size: 1.28vw;
  }

  html[lang="nl"] .pack-title {
    font-size: 1.2vw;
  }

  html[lang="nl"] .home .pack.active .pack-title br.show-mobile {
    display: block;
  }

  .title,
  .paper-box .title,
  .pack-feature h4,
  .workflow-item-text h4,
  .pack-about h3 {
    font-size: 2vw;
    line-height: 2.8vw;
    margin-bottom: 2.2vw;
  }

  .start-project .title {
    margin-bottom: 0;
  }

  .slider__items .workflow-item-text h4 {
    padding-top: 3.6em;
  }

  #google-ads-campaigns {
    margin-bottom: 50vh;
  }
}

/* desktops */
@media only screen and (min-width: 96em) and (max-width: 104em) {
  header nav li a {
    font-size: 0.8vw;
  }

  footer .logo {
    font-size: 1.8vw;
    line-height: 1.65vw;
  }

  footer h4,
  footer .btn {
    font-size: 1vw;
    line-height: 1.6vw;
  }

  footer ul li,
  footer ul a {
    font-size: 0.9vw;
    line-height: 1.2vw;
  }

  #google-ads-campaigns {
    margin-bottom: 50vh;
  }

  .pack-highlight-icons,
  .pack-highlight-text {
    margin-right: 8vw;
  }

  .price-packs-page .bubble {
    right: 5vw;
    zoom: 1.4;
    margin-top: -2vw;
  }

  .pack-overview .bubble {
    right: 7vw;
    zoom: 3.8;
    margin-top: -20vw;
  }

  .price-packs-page .start-project .title {
    font-size: 1.35vw;
  }

  article:first-child .paper-box {
    margin-bottom: 50vh;
  }

  .more-info {
    font-size: 16px !important;
    -webkit-text-stroke: 0.5px;
  }

  .price-packs-page .start-project.full-height {
    min-height: unset;
    padding-left: 20vw;
    padding-right: 0;
  }

  .price-packs-page .start-project .title {
    font-size: 22px;
    font-weight: 700;
    -webkit-text-stroke: 0;
  }

  .price-packs-page .contact-us-on h3 {
    font-size: 17px;
    font-weight: 600;
    -webkit-text-stroke: 0;
  }

  #tns1-mw .tns-item:last-child {
    margin-right: 2vw;
  }
}

@media only screen and (min-width: 104em) {
  header nav li a {
    font-size: 0.7vw;
  }

  /* .footer-left {
    margin-left: 3.2vw;
  } */

  .footer-left .logo {
    font-size: 1.85vw;
  }

  .footer-left h4 {
    font-size: 20px;
    line-height: 23px;
    margin-top: 2.6vw;
    margin-bottom: 0.4vw;
  }

  .footer-right {
    font-size: 17px !important;
    line-height: 24px !important;
  }

  #google-ads-campaigns {
    margin-bottom: 50vh;
  }

  .more-info {
    font-size: 17.5px !important;
  }

  .pack-highlight-icons,
  .pack-highlight-text {
    margin-right: 8vw;
  }

  .price-packs-page .bubble {
    right: 5vw;
    zoom: 1.5;
    margin-top: -3vw;
  }

  .pack-overview .bubble {
    right: 2.5vw;
    zoom: 5.5;
    margin-top: -15.5vw;
    animation: bubbleDelay 3s ease 1s forwards;
    opacity: 0;
  }

  .price-packs-page .start-project.full-height {
    min-height: 105vh;
    padding-left: 20vw;
    padding-right: 0;
  }

  .price-packs-page .start-project .title {
    font-size: 28px;
    font-weight: 700;
    -webkit-text-stroke: 0;
  }

  #tns1-mw .tns-item:last-child {
    margin-right: 2vw;
  }
}

@media all and (min-width: 35em) and (max-width: 1096px) and (orientation: portrait),
  (any-pointer: fine) and (min-width: 35em) and (max-width: 992px) {
  main {
    overflow: hidden;
  }
  section {
    padding-top: 25vw;
    padding-bottom: 25vw;
  }
  .hero .show-mobile,
  .home .price-packs .show-mobile,
  .start-project .show-mobile {
    display: none;
  }
  .hero .hide-mobile,
  .home .price-packs .hide-mobile,
  .start-project .hide-mobile {
    display: inline-block;
  }
  footer .logo {
    width: 10%;
  }
  footer .show-mobile {
    display: none;
  }
  .footer-right .footer-top ul {
    margin-left: 3em;
  }
  .footer-top ul li:first-child {
    font-weight: bold !important;
  }
  .btn-arrow {
    font-size: 14px !important;
  }
  .home #the-studio .home-content,
  .home .price-packs .home-content,
  .page-header,
  .complete-packages {
    display: block;
    width: calc(100% - 12vw);
    margin: auto;
  }
  .home #the-studio .home-left,
  .home #the-studio .home-right,
  .home .price-packs .home-left,
  .home .price-packs .home-right,
  .complete-packages .home-left,
  .complete-packages .home-right,
  .complete-packages {
    width: 100%;
  }
  .home .workflow h2.title {
    padding-left: 0;
    text-align: center;
  }
  .home #the-studio h2 {
    text-align: left;
    margin-bottom: 7.5vw;
  }
  .home .workflow-image {
    top: 0 !important;
  }
  .price-packs .home-left p {
    padding-right: 0;
  }
  .home .price-packs .home-right {
    margin-top: 7.5vw;
  }
  .home .price-packs .pack.active {
    width: 43vw;
    padding: 6vw !important;
  }
  .home .price-packs .pack.inactive {
    width: 13.25vw;
    padding: 5vw 3.5vw !important;
  }
  .home .price-packs .pack.active:before,
  .home .price-packs .pack.inactive:before {
    border-radius: 1.25vw !important;
  }
  .home .pack .pack-title {
    width: 90%;
  }
  .price-packs-content {
    display: block;
  }
  .price-packs-content .price-packs-item {
    display: inline-block;
    width: calc(49.7% - 3vw);
    vertical-align: middle;
  }
  .price-packs-content .price-packs-item:nth-of-type(odd) {
    margin-right: 3vw;
  }
  .price-packs-content .price-packs-item:nth-of-type(even) {
    margin-left: 3vw;
  }
  .price-packs-content .pack.info {
    transform: none !important;
    width: 50vw;
    min-height: auto;
    margin: auto;
  }
  html[lang="nl"] .price-packs-content .pack.info br {
    content: " ";
  }
  html[lang="nl"] .price-packs-content .pack.info br:after {
    content: " ";
  }
  .page-header-page .page-header h2 br,
  html[lang="nl"] .notice-content .title br,
  html[lang="pt"] .notice-content .title br {
    content: " ";
  }
  .page-header-page .page-header h2 br:after,
  html[lang="nl"] .notice-content .title br:after,
  html[lang="pt"] .notice-content .title br:after {
    content: " ";
  }
  html[lang="pt"] .page-header-page .page-header h2 {
    width: 66% !important;
  }
  html[lang="pt"] .page-header-page .page-header p {
    width: 72% !important;
  }
  html[lang="en"] .page-header-page .page-header h2 {
    width: 50% !important;
  }
  html[lang="en"] .page-header-page .page-header p {
    width: 72% !important;
  }
  html[lang="nl"] .page-header-page .page-header h2 {
    width: 50% !important;
  }
  html[lang="nl"] .page-header-page .page-header p {
    width: 66% !important;
  }
  .pack-title {
    font-size: 2.4vw !important;
    line-height: 3vw;
    margin-top: -30px;
  }
  .price-packs-page .pack-title {
    margin-top: unset;
  }
  .pack-price {
    font-size: 5.25vw;
    margin-top: 0;
    margin-bottom: 30px !important;
  }
  .pack-details ul {
    margin-bottom: 2.5vw;
    font-size: 1.7vw;
    line-height: 3.2vw;
    -webkit-text-stroke: 0.25px white;
  }
  .pack-header {
    display: block;
    width: 66%;
    margin: auto;
    text-align: center;
  }
  .home .workflow h2.title {
    margin-top: -5vh;
    margin-bottom: 0 !important;
  }
  .home .workflow-image {
    max-height: 38vw !important;
    margin-bottom: 3vw;
    border-radius: 1.25vw;
  }
  .home .mobile-slider .workflow-image {
    max-height: 38vw !important;
    margin-bottom: 3vw;
  }
  .home .workflow.show-mobile .mobile-slider {
    padding-bottom: 6vw;
  }
  .home .workflow-item-text {
    width: 90%;
    padding-left: 5%;
  }
  .workflow-item-text h4 {
    padding-bottom: 0;
  }
  .home .pack .pack-title,
  .pack-overview .pack-price span {
    font-size: 1.8vw;
  }
  html[lang="nl"] .home .pack .pack-features {
    font-size: 1.25vw;
  }
  .start-project form .form-col:first-child {
    margin-right: 2%;
  }
  .home .start-project form .form-col:last-child,
  .contact-page .start-project form .form-col:last-child {
    margin-left: 2%;
  }
  .service-item {
    margin: 2em 0 25.5vh;
  }
  .approach-page .workflow-image {
    margin-bottom: 0;
  }
  .approach-page .workflow-item-text h4 {
    padding-bottom: 2.75vw;
  }
  .approach-page .workflow-item-text p {
    width: 95%;
  }
  .home .price-packs .home-left p {
    margin-bottom: 4vw;
  }
  .packs-slider .pack {
    padding: 6vw;
  }
  .price-packs-content {
    column-gap: 7.5vw;
  }
  .price-packs-content .pack {
    padding: 4.55vw;
  }
  .price-packs-page .packs-slider-section .pack {
    padding: 7vw;
  }
  .complete-packages-slider {
    width: 66%;
  }
  .pack-details {
    grid-template-columns: auto auto;
    grid-template-rows: auto auto auto;
    margin-bottom: 8vw;
    padding: 8vw;
  }
  .online-video-page .pack-details {
    grid-template-rows: auto auto;
  }
  .pack-overview {
    padding-top: 17.5vw;
    padding-bottom: 17.5vw;
  }
  .paper-box-color svg {
    transform: scale(1);
  }
  .pack-highlight-icons .icon svg {
    transform: scale(1.6);
    margin-top: 3vw;
  }
  .pack-highlight-icons .icon p {
    font-size: 2vw;
    line-height: 3vw;
  }
  .the-media .hero h1,
  .the-media .hero .title,
  .the-media .hero-topics a,
  .the-media .hero-topics a:before {
    font-size: 7vw;
    line-height: 7.5vw;
  }
  .the-media .hero-text {
    transform: translateY(-7.5vh);
  }
  .the-creators-page .hero-text {
    transform: translateY(-12.5vh);
  }
  .web-page .hero-content {
    grid-template-columns: 23% 67%;
  }
  .hero-topics a:before {
    height: 7.55vw;
  }
  #the-studio .home-content h2,
  .start-project .title,
  .page-header h2,
  .home .workflow h2.title,
  .pack-header h2 {
    font-size: 7vw;
    line-height: 6vw;
  }
  .home .price-packs h2 {
    font-size: 4vw;
    line-height: 5vw;
  }
  .the-media-page .page-header h2,
  .the-media-page .page-header h3 {
    transform: scale(1.5);
    transform-origin: left top;
  }
  .the-media-page .page-header h2 {
    margin-bottom: 12vw;
  }
  .the-media-page .page-header h3 {
    margin-top: 3vw;
    margin-bottom: 3vw;
  }
  .the-media-page .page-header .btn-arrow {
    margin-top: 6vw;
  }
  .the-media .hero-content {
    display: flex;
    justify-content: center;
    width: 94%;
  }
  html[lang="en"] .web-page .hero-content {
    width: 80%;
  }
  html[lang="pt"] .web-page .hero-content {
    width: 93%;
  }
  .the-media .hero-content .hero-left {
    max-width: 42%;
    margin-right: 6vw;
  }
  .the-media .hero-text {
    font-size: 2.2vw;
    line-height: 3.4vw;
    width: 100% !important;
  }
  .the-media .service-item {
    display: flex;
    flex-direction: column;
  }
  .the-media .service-text {
    order: 1;
    margin-top: 4vw;
  }
  .the-media .service-image {
    order: 2;
    width: 100%;
    margin: 4vw auto 2vw !important;
    top: 0 !important;
  }
  .complete-packages-slider {
    width: calc(100% + 12.5vw);
    margin-left: -12.5vw;
    margin-top: 7.5vh;
  }
  .complete-packages-slider .pack {
    min-height: 472px;
  }
  .complete-packages-slider .pack-features {
    margin-bottom: 6vw;
  }
  .complete-packages-text {
    width: calc(100% - 12vw) !important;
  }
  .paper-box,
  .paper-box-color {
    display: block;
  }
  .paper-box h2 {
    margin-top: 2vw;
    margin-bottom: 8vw;
    width: 72%;
  }
  .paper-box .btn.show-mobile {
    display: inline-block;
    margin-top: 2vw;
    margin-bottom: 4vw;
  }
  .paper-box h3 {
    margin-bottom: 3.5vw;
  }
  .paper-box-color .feature-text {
    margin-top: 3vw;
    margin-bottom: 3vw;
    margin-left: 6vw;
  }
  .paper-box-color svg {
    margin-top: 4vw;
    transform: scale(1.75);
    transform-origin: top left;
  }
  html[lang="nl"] #development .paper-box {
    margin-bottom: 25vw;
  }
  #user-experience,
  #ads-highlight {
    margin-top: 15.5vw;
    padding-top: 9vw;
  }
  .online-advertising-page .complete-packages-slider,
  .design-page .complete-packages-slider {
    width: 100%;
    margin-left: -5vw;
  }
  .web-page .service-image {
    transform: none !important;
    width: calc(100% + 6vw) !important;
    text-align: center;
    left: -3vw;
    margin-bottom: 6vw !important;
  }
  .price-packs-content {
    grid-template-columns: 1fr 1fr;
  }
  .price-packs-content .pack {
    padding: 6vw;
    min-height: 398px;
  }
  .price-packs-content .pack .pack-features,
  .home .pack .pack-features,
  .complete-packages .pack-features {
    font-size: 1.8vw !important;
  }
  .price-packs-page .start-project.full-height {
    max-height: unset;
  }
  .price-packs-page .packs-slider-section .pack {
    padding: 5vw;
  }
  .complete-packages,
  .packs-slider-section {
    padding-top: 17.5vw;
    padding-bottom: 7.5vw;
  }
  .packs-slider-section .pack {
    min-height: 436px;
    padding-left: 6vw !important;
    padding-top: 6vw !important;
  }
  .packs-slider-section .pack .btn-plus {
    bottom: 1.25vw;
    right: 2vw;
  }
  .packs-slider-section .pack-features {
    font-size: 1.65vw !important;
  }
  .packs-slider-section .pack-price small {
    font-size: 1.65vw !important;
  }
  .packs-slider-section .info-pack .btn {
    display: block;
  }
  .pack-highlight,
  .pack-about {
    display: block;
    width: 100%;
    margin: 10vw auto;
    padding: 8vw;
  }
  .pack-about {
    padding-bottom: 0;
  }
  .price-packs-page .start-project {
    display: block;
    padding-left: 14vw;
    padding-top: 17.5vw;
    padding-right: 14vw;
    padding-bottom: 17.5vw;
  }
  .price-packs-page .start-project .title,
  .price-packs-page .start-project form {
    display: block;
    width: 100%;
  }
  .price-packs-page .start-project .form-col {
    margin-right: 0 !important;
  }
  .price-packs-page .start-project .hide-mobile {
    display: none;
  }
  .price-packs-page .start-project .show-mobile {
    display: block;
  }
  .pack-gallery {
    position: unset;
    width: 100%;
    margin-top: 6vw;
  }
  .pack-gallery picture {
    height: 40vh;
  }
  .pack-gallery .tns-nav {
    bottom: 30px;
    right: 6.7vw;
  }
  .pack-highlight h3 {
    margin-top: 8vw;
    margin-bottom: 2.4vw;
    font-size: 3.2vw;
    line-height: 4vw;
  }
  .complete-packages h2,
  .paper-box h2,
  .notice .title,
  .service-item h3 {
    font-size: 4vw;
    line-height: 5vw;
  }
  .pack .more-info {
    display: none;
  }
  .feature-icon {
    grid-template-columns: 10vw auto;
  }
  article:first-child .paper-box {
    margin-bottom: 24vw;
  }
  .paper-box-color {
    margin-top: 0;
    margin-bottom: 26.5vw;
    top: 0 !important;
  }
  .web-page .hero-text {
    width: 70%;
  }
  .web-page .service-image {
    width: calc(100% + 25vw);
    left: -1em;
    transform: translateY(42.5vw);
  }
  .online-advertising-page .hero-content {
    margin: auto;
  }
  .online-advertising-page .hero-text {
    width: 80%;
  }
  .notice {
    padding-right: 6vw;
    padding-left: 6vw;
  }
  .notice-content {
    padding-top: 12.5vw;
  }
  .title,
  .paper-box .title,
  .pack-feature h4,
  .workflow-item-text h4,
  .pack-about h3 {
    font-size: 2.4vw;
    line-height: 3.2vw;
  }
  .error-404 .title,
  .thank-you-page .title {
    margin-bottom: 0;
  }
  .pack-title,
  .feature-text h3,
  .paper-box h3 {
    font-size: 3vw;
  }
  .hero-text {
    font-size: 2vw;
    line-height: 3vw;
  }
  p,
  .text,
  .service-text p,
  .pack-features,
  .approach-page .workflow-item-text p,
  .start-project form input:not(.btn),
  .start-project form select,
  .start-project form textarea {
    font-size: 2.1vw;
    line-height: 3.4vw;
  }
  .the-creators-page .hero {
    height: calc(100vh + 25vh);
  }
  .hero-creators .btn-arrow.mobile-down {
    width: 35%;
    margin: 12vw auto 0;
    text-align: center;
  }
  .hero-creators .btn-arrow.mobile-down:after {
    float: none;
    margin: 6vw auto;
  }
  .the-creators-page .paper-box {
    position: relative;
    box-shadow: none;
  }
  #members {
    transform: translateY(-26.5vw);
    padding-top: 26.5vw;
    margin-bottom: -23.5vw;
  }
  .member {
    display: flex;
    flex-direction: column;
  }
  .member-photo {
    order: 1;
    width: 50vw;
    height: 50vw;
    margin: -25vh auto 5vh !important;
    border-radius: 50%;
  }
  .member-bio {
    order: 2;
  }
  .paper-box-title .hide-mobile {
    display: none;
  }
  .is-sticky-top {
    margin-bottom: 0;
  }
  .is-sticky-bottom {
    margin-top: 0;
  }
  div.fake {
    display: none;
  }
  .notice {
    padding-top: 0;
    padding-bottom: 0;
  }
  section.packs-slider-section,
  section.notice,
  section.start-project {
    height: auto;
  }
  section.notice.is-sticky-top {
    min-height: 80vw;
  }
  .notice-content .title,
  .notice-content p {
    padding-left: 7vw;
    padding-right: 2.5vw;
  }
  .notice-content p {
    margin-top: 5vw;
  }
  .notice-text {
    padding-right: 6vw;
    padding-bottom: 15vw;
  }
  .notice-text a {
    margin-left: 6vw;
  }
  .the-media .notice-content {
    display: block;
  }
  .approach-page .page-header .hero-text {
    font-size: 1.6vw;
    line-height: 2.9vw;
  }
  .hero-square-holder {
    position: fixed;
  }
  .the-creators-page .member.paper-box {
    margin-bottom: 45vw;
  }
  .the-creators-page .notice {
    height: 100vw;
  }
  .price-packs-content .pack.info {
    transform: translateX(24vw);
  }
  .btn-plus {
    font-size: 5vw;
  }
  .price-packs-page .price-packs-content .btn-plus,
  .complete-packages-slider .btn-plus {
    font-size: 6vw;
    position: absolute;
    bottom: 0;
    right: 1.5vw !important;
  }
  .price-packs-page .price-packs-content .btn-plus {
    bottom: 6vw;
    top: unset;
  }
}

@media (any-pointer: fine) and (min-width: 35em) and (max-width: 1090px) {
  .the-media-page section.show-mobile {
    display: none !important;
  }
}

/* narrow window */
@media all and (min-width: 560px) and (max-width: 767px) {
  section {
    padding-top: 15vw !important;
    padding-bottom: 15vw !important;
  }
  .hero {
    padding-top: 20vw !important;
  }
  .page-header {
    padding-top: 30vw !important;
  }
  .notice {
    margin: -15vw 0;
    padding-top: 0 !important;
  }
  .full-height,
  section.bg-white.is-sticky-top,
  .notice.is-sticky-top {
    height: unset !important;
    min-height: unset !important;
  }
  .hero .show-mobile,
  .home .price-packs .show-mobile,
  .start-project .show-mobile {
    display: inline-block;
  }
  .hero .hide-mobile,
  .home .price-packs .hide-mobile,
  .start-project .hide-mobile {
    display: none;
  }
  .home-content,
  .page-header {
    display: block;
    width: calc(100% - 12vw);
    margin: 0 auto !important;
  }
  .pack-title,
  .feature-text h3,
  .paper-box h3 {
    font-size: 3vw;
  }
  .home .price-packs .pack {
    height: 54vw !important;
  }
  .home .price-packs .btn {
    margin-top: 5vw;
  }
  .complete-packages {
    padding-left: 11.5vw;
  }
  .service-item {
    margin-bottom: 15vw;
  }
  article:last-of-type .service-item {
    margin-bottom: 0;
  }
  section article {
    position: relative;
  }
  .paper-box,
  .service-item {
    padding: 8vw 9vw;
  }
  .paper-box {
    padding-bottom: 6.5vw;
  }
  .paper-box-color {
    padding: 8vw 9vw;
  }
  .notice-content .title,
  .notice-content p {
    padding-left: 7vw;
    padding-right: 6vw;
  }
  .home .hero h1 a {
    display: inline-block;
    font-size: 8vw;
    line-height: 8.5vw;
  }
  .hero-text {
    font-size: 2.2vw;
    line-height: 3.3vw;
  }
  .home .hero-text {
    margin: 5vw 0;
  }
  p:not(.hero-text) {
    letter-spacing: 0;
  }
  .btn,
  .btn-arrow,
  .btn.btn-primary,
  .btn.btn-secondary,
  .btn-transparent,
  .btn.btn-transparent {
    font-size: 1.8vw;
    line-height: 3vw;
  }
  p,
  .text,
  .service-text p,
  .pack-features,
  .approach-page .workflow-item-text p,
  .start-project form input:not(.btn),
  .start-project form select,
  .start-project form textarea {
    font-size: 2.1vw;
    line-height: 3.4vw !important;
  }
}

@media all and (min-width: 560px) and (max-width: 660px) {
  .home .price-packs .pack.inactive {
    width: 7vw;
    height: 56vw;
    padding: 5vw 2.25vw !important;
  }
}

@media all and (min-width: 660px) and (max-width: 767px) {
  .home .price-packs .pack.inactive {
    width: 8vw;
    height: 56vw;
    padding: 5vw 2.25vw !important;
  }
}

@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
  header .logo {
    padding-top: 40px;
  }
  header nav li a {
    font-size: 0.9vw;
  }
  .web-page main {
    overflow-x: hidden !important;
  }
  .the-media section.notice,
  main {
    background: var(--primary-color);
  }
  article:first-child .paper-box {
    margin-bottom: 25vh;
  }
  .paper-box-color {
    margin-top: 37.5vh;
    margin-bottom: 37.5vh;
  }
  section.notice {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
  }
}

@media (min-width: 924px) and (max-width: 1084px) {
  svg .path {
    transform: scale(0.5);
  }
}

@media only screen and (max-device-height: 767px) and (min-width: 35em) and (orientation: landscape) {
  nav,
  main,
  footer,
  .js:before {
    display: none;
  }
  header.mobile-show {
    box-shadow: none;
  }
  body:before {
    content: "";
    position: fixed;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
    pointer-events: none;
    background: url(/img/rotate-phone.svg) center no-repeat;
    transform: scale(3);
  }
}

/* Tablets - horizontal */
@media screen and (orientation: landscape) and (min-device-width: 480px) and (max-device-width: 1024px) {
  header .logo {
    width: 320px;
    font-size: 32px !important;
  }
  .home main {
    padding-top: 0;
  }
  .menu {
    transition: none !important;
  }
  header nav ul {
    margin-top: -1.3em;
  }
  header nav li a {
    letter-spacing: 0 !important;
    font-size: 12.25px !important;
  }
  .is-sticky-top {
    margin-bottom: 0;
    position: relative;
  }
  .is-sticky-bottom {
    margin-top: 0;
    position: relative;
  }
  div.fake {
    display: none;
  }
  .notice {
    padding-top: 0;
    padding-bottom: 0;
  }
  section.packs-slider-section,
  section.notice,
  section.start-project {
    height: auto;
  }
  section.notice.is-sticky-top {
    min-height: 80vw;
  }
  footer .logo {
    width: 10%;
  }
  .btn-arrow {
    font-size: 14px !important;
  }
  .home .hide-mobile .workflow {
    display: none !important;
  }
  .home .workflow.show-mobile {
    display: block !important;
  }
  .home .workflow h2.title {
    margin-top: -5vh;
    margin-bottom: 0 !important;
    padding: 0;
    text-align: center;
  }
  .home .workflow-image {
    border-radius: 1.25vw;
  }
  .home .workflow-item-text {
    width: 90%;
    padding-left: 5%;
  }
  .workflow-item:hover .workflow-item-text {
    transform: none;
  }
  .slider__items .workflow-item .text {
    opacity: 1;
  }
  .slider__items .workflow-item:hover .workflow-numbers {
    margin-bottom: -0.5em;
    opacity: 1;
  }
  .slider__items .workflow-item:hover .text {
    opacity: 1;
    transform: none;
  }
  .home .price-packs .pack {
    min-height: 390px !important;
  }
  .home .price-packs .pack.active {
    width: 458vw;
    padding: 5vw 4.5vw 4vw !important;
  }
  .home .price-packs .pack.inactive {
    width: 13vw;
    padding: 5vw 2vw !important;
  }
  .start-project form .form-col:first-child {
    margin-right: 4%;
  }
  .error-404 .title,
  .thank-you-page .title {
    margin-bottom: 0;
  }
  .home .price-packs .pack.active:before,
  .home .price-packs .pack.inactive:before {
    border-radius: 1.25vw !important;
  }
  .hero-square-holder {
    position: fixed;
  }
  .the-media .hero {
    position: relative;
    top: 3vh;
    margin-bottom: -15vh !important;
  }
  .the-media .hero-text {
    position: relative;
    top: 3vh;
    margin-top: 7.5vh;
    margin-bottom: -2.5vh;
  }
  section {
    overflow-x: hidden;
  }
  .complete-packages,
  .packs-slider-section {
    padding-top: 12.5vw;
    padding-bottom: 7.5vw;
  }
  .design-page .complete-packages-text,
  .online-advertising-page .complete-packages-text {
    width: 30%;
  }
  .btn,
  .btn-arrow,
  .btn.btn-primary,
  .btn.btn-secondary,
  .btn.btn-transparent,
  p,
  .text,
  .service-text p,
  .pack-features,
  .pack-details ul,
  .pack-details h4,
  .approach-page .workflow-item-text p,
  .start-project form input:not(.btn),
  .start-project form select,
  .start-project form textarea {
    font-size: 1.2vw;
    line-height: 2vw;
  }
  .hero-topics h2 {
    line-height: 56px;
  }
  .title,
  .paper-box .title,
  .pack-feature h4,
  .workflow-item-text h4,
  .pack-about h3 {
    font-size: 1.5vw;
    line-height: 1.8vw;
  }
  .packs-slider-section .pack {
    min-height: 380px !important;
  }
  .packs-slider-section .pack .btn-plus {
    bottom: -0.6vw;
    right: 0.6vw;
  }
  .packs-slider-section .pack-features {
    font-size: 1.2vw !important;
  }
  .price-packs-item,
  .pack.info.text-center {
    width: 90%;
    margin: auto;
  }
  .price-packs-content .pack,
  .pack.info.text-center {
    min-height: 348px !important;
    margin-bottom: 3em;
    padding: 4vw;
  }
  .packs-slider .pack {
    height: 360px !important;
    padding: 4vw 3.25vw !important;
  }
  .approach-page .page-header .hero-text {
    font-size: 1.2vw;
    line-height: 1.8vw;
  }
  .workflow h2 {
    width: 30.33%;
    position: sticky !important;
  }
  .hero-creators .btn-arrow.mobile-down {
    width: 20%;
    margin: 9vw auto -3vw;
    text-align: center;
  }
  .hero-creators .btn-arrow.mobile-down:after {
    float: none;
    margin: 3vw auto;
  }
  .the-creators-page .notice {
    margin: 12vw 0 0;
    padding-bottom: 12vw;
    overflow: hidden;
  }
  .pack-header {
    margin-top: -4.5vw;
    margin-bottom: -2vw;
  }
  .pack-details {
    margin-bottom: 7.5vw;
  }
  .pack-overview .btn-arrow {
    margin-bottom: 5vw;
  }
  .pack-highlight {
    grid-template-columns: 43% 57%;
  }
  .pack-highlight-icons .icon svg {
    transform: scale(2.7) translateY(5px) translateX(-4px);
    transform-origin: center left;
  }
  .pack-gallery {
    width: 50vw;
    right: -6vw;
  }
  .pack-gallery picture {
    position: relative;
    height: 37vw;
  }
  .pack-about {
    margin-top: 15vw;
    margin-bottom: 5vw;
  }
}
@media screen and (min-device-width: 898px) and (max-device-width: 1024px) {
  .pack-highlight-icons .icon svg {
    transform: scale(2.7) translate(12px, 8px);
    transform-origin: center;
  }
}

@media (any-pointer: fine) and (max-width: 35em) {
  .home .mobile-slider {
    height: auto;
  }
  .home .mobile-slider .workflow-item {
    margin-bottom: 18vw;
  }
  .home .mobile-slider .workflow-item:last-of-type {
    margin-bottom: unset;
  }
}
@media (any-pointer: fine) and (min-width: 35em) and (max-width: 992px) {
  .home .hide-mobile {
    display: unset;
  }
  .home .hero .hide-mobile {
    display: none !important;
  }
  .home .hero .show-mobile {
    display: block !important;
  }
  .home .hide-mobile .workflow {
    display: block !important;
    height: 940px !important;
  }
  .home .workflow.show-mobile {
    display: none !important;
  }
  .home .workflow h2.title {
    padding-left: 12vw;
    text-align: left;
    margin-top: 4vw;
    margin-bottom: -6vw !important;
  }
  .home .slider__item {
    width: 58vw;
    flex: 0 0 58vw;
  }
  .home .slider__item:first-of-type {
    margin-left: -4vw;
  }
  .home .slider__item:not(:first-of-type) {
    margin-left: 12vw;
  }
  .home .slider__item:nth-child(even) {
    margin-top: 10vh;
  }
  .home .slider__items .workflow-image {
    height: 38vw;
    background-size: 100% !important;
    border-radius: 0;
  }
  .home .slider__items .workflow-item-text p {
    margin-top: 4vw;
  }
  .home .price-packs {
    height: auto;
  }
  .home .price-packs .pack.active {
    width: 42vw;
  }
  .home .price-packs .pack.inactive {
    width: auto;
  }
  .home .price-packs .btn.show-mobile {
    display: none;
  }
  footer .site-map,
  .home .show-mobile {
    display: none;
  }
  footer .logo {
    margin-bottom: 2em;
  }
  .home-content h2 {
    text-align: left;
  }
}

@media (any-pointer: fine) and (max-width: 767px) {
  .home .slider__items .workflow-item-text .flex-bottom h4 {
    transform: translateY(-25px);
  }
}

@media (any-pointer: fine) and (min-width: 768px) and (max-width: 1081px) {
  .home .slider__items .workflow-item-text .flex-bottom h4 {
    transform: translateY(0) !important;
  }
  .pack-gallery {
    right: -6vw;
  }
  .pack-highlight-icons,
  .pack-highlight-text {
    margin-right: 6vw;
  }
}

@media (any-pointer: fine) and (min-width: 768px) and (max-width: 923px) {
  .pack-highlight-icons .icon svg {
    transform: scale(1.7) translateX(-9px);
    transform-origin: left bottom;
  }
  .feature-icon svg {
    transform: scale(2) translate(1.6vw, 1vw);
    transform-origin: center;
  }
}

@media (any-pointer: fine) and (min-width: 924px) and (max-width: 1084px) {
  .pack-highlight-icons .icon svg {
    transform: scale(2.7) translateY(8px);
    transform-origin: left center;
  }
  .feature-icon svg {
    transform: scale(5) translate(2vw, 1.7vw);
    transform-origin: center;
  }
}

@media (any-pointer: fine) and (min-width: 924px) and (max-width: 1084px) and (orientation: landscape) {
  .feature-icon svg {
    transform: scale(2.9) translate(1.2vw, 0.8vw);
    transform-origin: center;
  }
}

@media (any-pointer: fine) and (min-width: 924px) and (max-width: 992px) {
  .feature-icon svg {
    transform: scale(4) translate(2.4vw, 1.8vw);
    transform-origin: center;
  }
}

@media (any-pointer: fine) and (min-width: 1081px) and (max-width: 1366px) {
  .home .slider__item {
    width: 52vw;
    flex: 0 0 52vw;
  }
  .home .slider__item:first-of-type {
    margin-left: -8vw;
  }
  .home .slider__item:not(:first-of-type) {
    margin-left: 16vw;
  }
  .home .slider__items .workflow-item-text p {
    margin-top: 2vw;
  }
  .home .price-packs .pack {
    min-height: unset;
  }
  .start-project form input:not(.btn),
  .start-project form select,
  .start-project form textarea {
    letter-spacing: 0.5px;
  }
  .pack-feature h4 {
    margin-bottom: 1em;
  }
  .pack-feature h4,
  .price-packs-content .pack.info .title {
    font-size: 18px;
    line-height: 26px;
  }
  .price-packs-content .pack.info p {
    font-size: 13px;
  }
  .price-packs-content .pack.info .btn {
    margin-bottom: 0;
  }
  .pack-gallery {
    right: -6vw;
    -moz-transform: translateY(-30%);
  }
  .pack-highlight-icons,
  .pack-highlight-text {
    margin-right: 6vw;
  }
  .feature-icon svg {
    transform: scale(1.7);
    transform-origin: center;
  }
}

@media (any-pointer: fine) and (min-width: 1366px) and (max-width: 1560px) {
  .home .slider__item {
    width: 38vw;
    flex: 0 0 38vw;
  }
  .home .slider__item:first-of-type {
    margin-left: 0;
  }
  .home .slider__item:not(:first-of-type) {
    margin-left: 8vw;
  }
  .home .slider__item:nth-child(even) {
    margin-top: 14vh;
  }
  .home .slider__items .workflow-item-text .flex-bottom h4 {
    margin-top: -5em;
    font-size: 1.5vw;
    line-height: 1.1em;
  }
  .home .slider__items .workflow-item-text p {
    margin-top: 0.5vw;
  }
  .home .workflow-image {
    height: 18vw;
  }
  .home .workflow .slider {
    top: 5vw;
  }
  .home .workflow h3 span {
    font-size: 7vw;
  }
  .pack-gallery {
    right: -12.5vw;
    -moz-transform: translateY(-30%);
  }
  .pack-highlight-icons,
  .pack-highlight-text {
    margin-right: 6vw;
  }
  #user-experience {
    margin-top: 50vh;
  }
}

@media (any-pointer: fine) and (min-width: 1560px) {
  .home .slider__items .workflow-item-text .flex-bottom h4 {
    margin-top: -3em;
    margin-bottom: 1em;
  }
  .home .slider__items .workflow-item-text p {
    margin-top: 0.5vw;
  }
  .pack-gallery {
    -moz-transform: translateY(-30%);
  }
  #user-experience {
    margin-top: 30vh;
  }
}

.btn-arrow,
.btn-primary:not(.nav-item),
.btn.btn-primary,
.btn-secondary,
.btn.btn-secondary,
.btn-transparent,
.btn.btn-transparent {
  font-size: 16px;
  line-height: 22px;
}

.btn.btn-primary:after,
.btn.btn-secondary:after,
.btn-transparent:after {
  width: 14px;
  height: 20px;
  margin-left: 0.7em;
  margin-right: -0.4em;
}

/* ==========================================================================
   Responsive Images
   ========================================================================== */

@media (max-width: 480px) {
  /* workflow */
  .wf_discovery-phase {
    background-image: url(/img/workflow/discovery-phase_480w.jpg);
  }
  .wf_strategy-and-positioning {
    background-image: url(/img/workflow/strategy-and-positioning_480w.jpg);
  }
  .wf_content-and-wireframing {
    background-image: url(/img/workflow/content-and-wireframing_480w.jpg);
  }
  .wf_design {
    background-image: url(/img/workflow/design_480w.jpg);
  }
  .wf_project-review {
    background-image: url(/img/workflow/project-review_480w.jpg);
  }
  .wf_delivery {
    background-image: url(/img/workflow/delivery_480w.jpg);
  }
  .wf_support-and-follow-up {
    background-image: url(/img/workflow/support-and-follow-up_480w.jpg);
  }

  /* design page */
  #strategy .service-image {
    background-image: url(/img/the-media/strategy_480w.jpg);
  }

  /* online ads page */
  #paid-social .service-image {
    background-image: url(/img/the-media/online-adv_480w.jpg);
  }

  /* the creators */
  #members .nuno {
    background-image: url(/img/nuno_480w.jpg);
  }
  #members .birgit {
    background-image: url(/img/birgit_480w.jpg);
  }

  /* packs */
  .gal_corporate-website-1 {
    background-image: url(/img/packs/corporate-website-1_480w.jpg);
  }
  .gal_corporate-website-2 {
    background-image: url(/img/packs/corporate-website-2_480w.jpg);
  }
  .gal_corporate-website-3 {
    background-image: url(/img/packs/corporate-website-3_480w.jpg);
  }
  .gal_campaigns {
    background-image: url(/img/packs/campaigns_480w.jpg);
  }
  .gal_account-manager {
    background-image: url(/img/packs/account-manager_480w.jpg);
  }
}

@media (min-width: 481px) and (max-width: 1400px) {
  /* workflow */
  .wf_discovery-phase {
    background-image: url(/img/workflow/discovery-phase_960w.jpg);
  }
  .wf_strategy-and-positioning {
    background-image: url(/img/workflow/strategy-and-positioning_960w.jpg);
  }
  .wf_content-and-wireframing {
    background-image: url(/img/workflow/content-and-wireframing_960w.jpg);
  }
  .wf_design {
    background-image: url(/img/workflow/design_960w.jpg);
  }
  .wf_project-review {
    background-image: url(/img/workflow/project-review_960w.jpg);
  }
  .wf_delivery {
    background-image: url(/img/workflow/delivery_960w.jpg);
  }
  .wf_support-and-follow-up {
    background-image: url(/img/workflow/support-and-follow-up_960w.jpg);
  }

  /* design page */
  #strategy .service-image {
    background-image: url(/img/the-media/strategy_960w.jpg);
  }

  /* online ads page */
  #paid-social .service-image {
    background-image: url(/img/the-media/online-adv_960w.jpg);
  }

  /* the creators */
  #members .nuno {
    background-image: url(/img/nuno_960w.jpg);
  }
  #members .birgit {
    background-image: url(/img/birgit_960w.jpg);
  }

  /* packs */
  .gal_corporate-website-1 {
    background-image: url(/img/packs/corporate-website-1_960w.jpg);
  }
  .gal_corporate-website-2 {
    background-image: url(/img/packs/corporate-website-2_960w.jpg);
  }
  .gal_corporate-website-3 {
    background-image: url(/img/packs/corporate-website-3_960w.jpg);
  }
  .gal_campaigns {
    background-image: url(/img/packs/campaigns_960w.jpg);
  }
  .gal_account-manager {
    background-image: url(/img/packs/account-manager_960w.jpg);
  }
}

@media (min-width: 1401px) {
  /* workflow */
  .wf_discovery-phase {
    background-image: url(/img/workflow/discovery-phase_1200w.jpg);
  }
  .wf_strategy-and-positioning {
    background-image: url(/img/workflow/strategy-and-positioning_1200w.jpg);
  }
  .wf_content-and-wireframing {
    background-image: url(/img/workflow/content-and-wireframing_1200w.jpg);
  }
  .wf_design {
    background-image: url(/img/workflow/design_1200w.jpg);
  }
  .wf_project-review {
    background-image: url(/img/workflow/project-review_1200w.jpg);
  }
  .wf_delivery {
    background-image: url(/img/workflow/delivery_1200w.jpg);
  }
  .wf_support-and-follow-up {
    background-image: url(/img/workflow/support-and-follow-up_1200w.jpg);
  }

  /* design page */
  #strategy .service-image {
    background-image: url(/img/the-media/strategy_1200w.jpg);
  }

  /* online ads page */
  #paid-social .service-image {
    background-image: url(/img/the-media/online-adv_1200w.jpg);
  }

  /* the creators */
  #members .nuno {
    background-image: url(/img/nuno_1200w.jpg);
  }
  #members .birgit {
    background-image: url(/img/birgit_1200w.jpg);
  }

  /* packs */
  .gal_corporate-website-1 {
    background-image: url(/img/packs/corporate-website-1_1200w.jpg);
  }
  .gal_corporate-website-2 {
    background-image: url(/img/packs/corporate-website-2_1200w.jpg);
  }
  .gal_corporate-website-3 {
    background-image: url(/img/packs/corporate-website-3_1200w.jpg);
  }
  .gal_campaigns {
    background-image: url(/img/packs/campaigns_1200w.jpg);
  }
  .gal_account-manager {
    background-image: url(/img/packs/account-manager_1200w.jpg);
  }
}

#videoFullscreen {
  position: fixed;
  z-index: -1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 1);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 300ms;
}

body.is-video-open {
  overflow: hidden;
}

body.is-video-open #videoFullscreen {
  z-index: 10 !important;
  opacity: 1 !important;
}

.showreel-preview {
  position: relative;
}

.showreel-preview video {
  background-color: #e9b26d;
}

.showreel-preview #goFullscreen {
  position: absolute;
  bottom: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.5);
  border: none;
  padding: 5px 7px 3px;
  color: white;
  border-radius: 0 6px 0 0;
  font-family: "Aristotelica Display Demibold";
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all 300ms;
  cursor: pointer;
  opacity: 0.5;
}

.showreel-preview:hover #goFullscreen,
.showreel-preview:focus #goFullscreen {
  opacity: 0.8;
}

#close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 11;
  padding: 2rem 2rem 1.7rem;
  font-family: "Aristotelica Display Demibold";
  font-size: 1rem;
  background-color: var(--primary-color);
  color: white;
  border: none;
  cursor: pointer;
}

#player {
  width: 100vw;
}

.pack-gallery-video video {
  width: 95%;
  border-radius: 12px;
  box-shadow: 0 5px 60px rgba(0, 0, 0, 0.16);
}

.pack-gallery,
.bubble {
  will-change: transform !important;
  animation-delay: 0 !important;
}

@media all and (max-width: 52em) {
  .pack-gallery-video {
    text-align: center;
  }
  .pack-gallery-video video {
    width: 100%;
  }
}

@media all and (max-width: 35em) {
  .pack-gallery-video video {
    width: 94%;
  }
}

@media all and (min-width: 52em) {
  .service-image video {
    width: 95%;
  }
  .img-left .service-image {
    text-align: right;
  }
}

@media all and (min-width: 35em) and (max-width: 52em) {
  .pack-overview .bubble {
    right: 2vw;
    zoom: 3.5;
    margin-top: -45vw;
    animation: bubbleDelay 3s ease 1s forwards;
    opacity: 0;
  }
}

@media all and (min-width: 52em) and (max-width: 96em) {
  .pack-overview .bubble {
    right: 5vw;
    zoom: 4;
    margin-top: -22vw;
    animation: bubbleDelay 3s ease 1s forwards;
    opacity: 0;
  }
}

@media all and (min-width: 52em) and (max-width: 82em) {
  .pack-overview .bubble {
    right: 3vw;
    margin-top: -26vw;
  }
}

@keyframes bubbleDelay {
  to {
    opacity: 1;
  }
}

.pack-moving {
  position: absolute;
  z-index: 2222;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateZ(2px);
}
.pack h3,
.pack h4,
.pack-price,
.pack-features {
  transition: all 0.25s ease-out;
}