@charset "UTF-8";
/*
Theme Name:		Impression
Theme URI:		http://www.atomia.com
Description:	impress microsite theme for 2019
Author:			Dejan Bondžić, Atomia
Author URI:     https://se.linkedin.com/in/dejanbondzic
Version:		0.1
*/
/*----------------------------------------------------------------------------*/
/*! | Reset                                                                   */
/*----------------------------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css?family=Rubik:400,700");
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
  background: transparent;
}

article, aside, figure, footer, header, nav, section, details, summary {
  display: block;
}

/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */
/* Apply a natural box layout model to all elements: http://paulirish.com/2012/box-sizing-border-box-ftw/ */
*, *:before, *:after {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
   If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img,
object,
embed {
  max-width: 100%;
}

/* force a vertical scrollbar to prevent a jumpy page */
html {
  overflow-y: scroll;
}

/* we use a lot of ULs that aren't bulleted. 
	don't forget to restore the bullets within content. */
ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help;
}

/* tables still need cellspacing="0" in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

th {
  font-weight: bold;
  vertical-align: bottom;
}

td {
  font-weight: normal;
  vertical-align: top;
}

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

input, select {
  vertical-align: middle;
}

pre {
  white-space: pre;
  /* CSS2 */
  white-space: pre-wrap;
  /* CSS 2.1 */
  white-space: pre-line;
  /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word;
  /* IE */
}

input[type="radio"] {
  vertical-align: text-bottom;
}

input[type="checkbox"] {
  vertical-align: bottom;
}

.ie7 input[type="checkbox"] {
  vertical-align: baseline;
}

.ie6 input {
  vertical-align: text-bottom;
}

select, input, textarea {
  font: 99% sans-serif;
}

table {
  font-size: inherit;
  font: 100%;
}

small {
  font-size: 85%;
}

strong {
  font-weight: bold;
}

td, td img {
  vertical-align: top;
}

/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* standardize any monospaced elements */
pre, code, kbd, samp {
  font-family: monospace, sans-serif;
}

/* hand cursor on clickable elements */
.clickable,
label,
input[type=button],
input[type=submit],
input[type=file],
button {
  cursor: pointer;
}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {
  margin: 0;
}

/* make buttons play nice in IE */
button,
input[type=button] {
  width: auto;
  overflow: visible;
  border: none;
  background: none;
}

/* scale images in IE7 more attractively */
.ie7 img {
  -ms-interpolation-mode: bicubic;
}

/* prevent BG image flicker upon hover 
   (commented out as usage is rare, and the filter syntax messes with some pre-processors)
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
*/
/* let's clear some floats */
.clearfix:before, .clearfix:after {
  content: "\0020";
  display: block;
  height: 0;
  overflow: hidden;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1;
}

/*----------------------------------------------------------------------------*/
/*! | Colors                                                                  */
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*! | Typography                                                              */
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*! | GUI                                                                     */
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*! | Break points                                                            */
/*----------------------------------------------------------------------------*/
/* special */
/*----------------------------------------------------------------------------*/
/*! | Typography                                                              */
/*----------------------------------------------------------------------------*/
html {
  font-family: "Rubik", sans-serif;
  font-size: 1em;
}

h1,
h2,
h3 {
  font-size: 2.2rem;
  margin: 2em 0 1.2rem;
  color: #09b1e9;
  font-family: "Rubik", sans-serif;
}

h1 {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 1.2em;
}

@media only screen and (max-width: 425px) {
  h1 {
    text-align: center;
  }
}

h2 {
  font-size: 1.6rem;
}

h3 {
  font-size: 1.2rem;
}

p {
  font-size: 1rem;
  line-height: 1.5em;
  margin-bottom: 1.2rem;
  color: #312f30;
}

p strong {
  color: #000;
  font-weight: 700;
}

.ul {
  margin: 0 0 1.2rem;
}

.ul li {
  margin-bottom: .5em;
  color: #312f30;
}

.ul--squares li {
  padding-left: 3rem;
  position: relative;
}

.ul--squares li::before {
  content: "";
  position: absolute;
  left: 1.8rem;
  top: .4em;
  width: .313em;
  height: .313em;
  background-color: #09b1e9;
}

.list {
  margin: 2rem 0;
}

.list li {
  position: relative;
  list-style: none;
  color: #312f30;
  padding-left: 3.6rem;
  margin-bottom: 1.2rem;
}

.list__bullet {
  color: #f92961;
  position: absolute;
  left: .2em;
  top: -.2em;
}

.list--brutal .list__bullet {
  font-size: 2.2em;
  font-weight: 700;
}

/*----------------------------------------------------------------------------*/
/*! | Counter                                                                    */
/*----------------------------------------------------------------------------*/
body {
  counter-reset: main-counter;
}

.counter {
  padding-left: 3rem;
  position: relative;
}

.counter::before {
  counter-increment: main-counter;
  content: counter(main-counter) ".";
  position: absolute;
  left: 0;
}

.counter--reset {
  counter-reset: main-counter;
}

.counter + .counter__lvl2 {
  counter-reset: main-counter-lvl2;
}

.counter__lvl2 {
  padding-left: 3rem;
  position: relative;
}

.counter__lvl2::before {
  counter-increment: main-counter-lvl2;
  content: counter(main-counter) "." counter(main-counter-lvl2);
  position: absolute;
  left: 0;
}

.counter__lvl2 + .counter__lvl3 {
  counter-reset: main-counter-lvl3;
}

.counter__lvl3 {
  padding-left: 6rem;
  position: relative;
}

.counter__lvl3::before {
  counter-increment: main-counter-lvl3;
  content: counter(main-counter) "." counter(main-counter-lvl2) "." counter(main-counter-lvl3);
  position: absolute;
  left: 3rem;
}

.counter__lvl3--letters::before {
  content: counter(main-counter-lvl3, lower-latin) ")";
  left: 4rem;
}

/*----------------------------------------------------------------------------*/
/*! | hr                                                                      */
/*----------------------------------------------------------------------------*/
.hr {
  margin: 3rem 0;
  height: .1875rem;
  background-color: #bab8b7;
  border: none;
}

.hr--dashed {
  background: linear-gradient(to right, #bab8b7 70%, transparent 70%);
  background-repeat: repeat-x;
  background-size: 2rem 100%;
}

/*----------------------------------------------------------------------------*/
/*! | Table                                                                  */
/*----------------------------------------------------------------------------*/
.table {
  margin-bottom: 1rem;
}

@media only screen and (max-width: 1200px) {
  .table {
    max-width: 28rem;
  }
}

.table.table--row-as-card {
  width: 100%;
  text-align: left;
  position: relative;
}

@media only screen and (max-width: 1200px) {
  .table.table--row-as-card thead {
    display: none;
  }
}

.table.table--row-as-card tr:nth-child(odd) td {
  background-color: #fff;
}

@media only screen and (max-width: 1200px) {
  .table.table--row-as-card tr:nth-child(odd) td:first-child {
    background-color: #09b1e9;
  }
}

@media only screen and (max-width: 1200px) {
  .table.table--row-as-card tr:nth-child(odd) td {
    background-color: #f8f8f5;
  }
}

.table.table--row-as-card tr:last-child td {
  box-shadow: 0 -2px 0 #09b1e9 inset;
  border-bottom: none;
}

@media only screen and (max-width: 1200px) {
  .table.table--row-as-card tr:last-child td {
    box-shadow: -1px 0 0 #e3e3da inset, 1px 0 0 #e3e3da inset;
  }
}

.table.table--row-as-card tr:last-child td:first-child {
  box-shadow: 2px -2px 0 #09b1e9 inset;
  border-bottom-left-radius: 0.5rem;
}

@media only screen and (max-width: 1200px) {
  .table.table--row-as-card tr:last-child td:first-child {
    border-bottom-left-radius: 0;
  }
}

.table.table--row-as-card tr:last-child td:last-child {
  box-shadow: -2px -2px 0 #09b1e9 inset;
  border-bottom-right-radius: 0.5rem;
}

@media only screen and (max-width: 1200px) {
  .table.table--row-as-card tr:last-child td:last-child {
    box-shadow: -1px 0 0 #e3e3da inset, 1px 0 0 #e3e3da inset, 0 -1px 0 #e3e3da inset;
  }
}

.table.table--row-as-card tr:last-child td:only-child {
  box-shadow: 2px -2px 0 #09b1e9 inset, -2px -2px 0 #09b1e9 inset;
}

@media only screen and (max-width: 1200px) {
  .table.table--row-as-card tr {
    display: block;
    margin-bottom: 1rem;
  }
}

.table.table--row-as-card th {
  padding: .8rem 1rem;
  background-color: #09b1e9;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 400;
  text-transform: uppercase;
}

.table.table--row-as-card th:first-child {
  border-top-left-radius: 0.5rem;
}

.table.table--row-as-card th:last-child {
  border-top-right-radius: 0.5rem;
}

.table.table--row-as-card td {
  padding: .8rem 1rem;
  background-color: #f8f8f5;
  box-shadow: 0 -1px 0 #e3e3da inset;
}

@media only screen and (max-width: 1200px) {
  .table.table--row-as-card td {
    display: block;
    padding: .2rem 1.4rem;
    text-align: right;
    background-color: #f8f8f5;
    border-bottom: none;
    box-shadow: -1px 0 0 #e3e3da inset, 1px 0 0 #e3e3da inset;
  }
}

@media only screen and (max-width: 1200px) {
  .table.table--row-as-card td::before {
    content: attr(data-th);
    float: left;
    position: relative;
    top: .1rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #939190;
  }
}

.table.table--row-as-card td:first-child {
  box-shadow: 2px 0 0 #09b1e9 inset, 0 -1px 0 #e3e3da inset;
}

@media only screen and (max-width: 1200px) {
  .table.table--row-as-card td:first-child {
    padding: .8rem 1rem;
    border-radius: 0.25rem 0.25rem 0 0;
    background-color: #09b1e9;
    color: #fff;
    box-shadow: none;
    text-align: left;
  }
}

@media only screen and (max-width: 1200px) {
  .table.table--row-as-card td:first-child::before {
    content: none;
  }
}

@media only screen and (max-width: 1200px) {
  .table.table--row-as-card td:first-child .button--secondary {
    color: #fff;
    border-color: #fff;
  }
}

@media only screen and (max-width: 1200px) {
  .table.table--row-as-card td:nth-child(2) {
    padding: 1rem 1.4rem .2rem;
  }
}

.table.table--row-as-card td:last-child {
  box-shadow: -2px 0 0 #09b1e9 inset, 0 -1px 0 #e3e3da inset;
}

@media only screen and (max-width: 1200px) {
  .table.table--row-as-card td:last-child {
    padding: .2rem 1.4rem 1rem;
    border-radius: 0 0 0.25rem 0.25rem;
    box-shadow: -1px 0 0 #e3e3da inset, 1px 0 0 #e3e3da inset, 0 -1px 0 #e3e3da inset;
  }
}

.table.table--row-as-card td:only-child {
  box-shadow: 2px 0 0 #09b1e9 inset, -2px 0 0 #09b1e9 inset, 0 -1px 0 #e3e3da inset;
}

.table.table--row-as-card td.skeleton {
  padding: 5rem 0;
}

/*----------------------------------------------------------------------------*/
/*! | Section                                                                 */
/*----------------------------------------------------------------------------*/
.section {
  position: relative;
  z-index: 10;
  padding: 3rem 0;
}

.section__margins {
  max-width: 74rem;
  margin: auto;
  padding: 0 2rem;
  position: relative;
}

.section__margins--tight {
  max-width: 50rem;
}

.section--blue {
  background-color: #09b1e9;
}

.section--blue h1,
.section--blue h2,
.section--blue h3,
.section--blue p {
  color: #fff;
}

.section--grey {
  background-color: #f8f8f5;
}

.section--white {
  background-color: #fff;
}

.section--shadow:before {
  content: "";
  position: absolute;
  bottom: 0;
  height: 10rem;
  width: 100%;
  background: linear-gradient(to bottom, #ffffff 0%, #e4e5e7 100%);
}

.section--slide {
  padding: 6rem 0 0;
}

@media only screen and (max-width: 890px) {
  .section--slide {
    padding-top: 3rem;
  }
}

@media only screen and (max-width: 425px) {
  .section--slide {
    padding-top: 2rem;
  }
}

.section--squeeze-left {
  margin-bottom: -3vw;
  padding: 3vw 0 calc(3vw + 2rem);
  -webkit-clip-path: polygon(0 calc(0% + 3vw), 100% 0, 100% 100%, 0 calc(100% - 3vw));
  clip-path: polygon(0 calc(0% + 3vw), 100% 0, 100% 100%, 0 calc(100% - 3vw));
}

.section--squeeze-right {
  margin-bottom: -3vw;
  padding: 3vw 0 calc(3vw + 2rem);
  -webkit-clip-path: polygon(0 0, 100% calc(0% + 3vw), 100% calc(100% - 3vw), 0 100%);
  clip-path: polygon(0 0, 100% calc(0% + 3vw), 100% calc(100% - 3vw), 0 100%);
}

.section--squeeze-bottom-right {
  margin-bottom: -3vw;
  padding: 1rem 0 calc(3vw + 2rem);
  -webkit-clip-path: polygon(0 0, 100% 0%, 100% calc(100% - 3vw), 0 100%);
  clip-path: polygon(0 0, 100% 0%, 100% calc(100% - 3vw), 0 100%);
}

.section--3d-cards {
  margin: auto;
  perspective: 70rem;
  text-align: center;
  padding: 6rem 0 4rem;
}

@media only screen and (max-width: 760px) {
  .section--3d-cards {
    max-width: 29rem;
  }
}

.section--copyright {
  text-align: center;
  color: #312f30;
  padding: 2rem 0 .5rem;
}

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

.section--signup h1 {
  margin-top: 1em;
}

/*----------------------------------------------------------------------------*/
/*! | Feature                                                                 */
/*----------------------------------------------------------------------------*/
.feature {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  margin: 1rem 0;
}

.feature__image {
  margin-right: 1rem;
}

.feature__text h3 {
  margin-top: 0;
}

/*----------------------------------------------------------------------------*/
/*! | Card                                                                    */
/*----------------------------------------------------------------------------*/
.card {
  display: inline-block;
  width: 25rem;
  height: 22rem;
  padding: 3rem 7.6rem;
  position: relative;
  vertical-align: top;
}

.card--left {
  margin-right: -7rem;
  text-align: left;
  padding-left: 2rem;
  -webkit-clip-path: polygon(0 0, 100% calc(0% + 1.5rem), 100% calc(100% - 1.5rem), 0 100%);
  clip-path: polygon(0 0, 100% calc(0% + 1.5rem), 100% calc(100% - 1.5rem), 0 100%);
  background: linear-gradient(160deg, #f8f8f5 0%, #f2f2ee 100%);
}

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

@media only screen and (max-width: 760px) {
  .card {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 3rem 2rem;
  }
}

.card--right {
  text-align: right;
  padding: 2rem;
  -webkit-clip-path: polygon(0 calc(0% + 1.5rem), 100% 0, 100% 100%, 0 calc(100% - 1.5rem));
  clip-path: polygon(0 calc(0% + 1.5rem), 100% 0, 100% 100%, 0 calc(100% - 1.5rem));
  background: linear-gradient(140deg, #fbfbfa 0%, #f2f2ee 40%);
}

@media only screen and (max-width: 760px) {
  .card--right {
    margin-top: -3rem;
  }
}

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

.card h1 {
  margin: 0 0 2rem;
}

.card-shadow {
  position: relative;
  top: 4rem;
  display: inline-block;
}

@media only screen and (max-width: 760px) {
  .card-shadow {
    display: block;
  }
}

.card-shadow:before {
  content: "";
  position: absolute;
  top: 2rem;
  width: 7rem;
  height: 14rem;
  box-shadow: -1rem -1rem 2rem rgba(0, 0, 0, 0.03);
}

@media only screen and (max-width: 760px) {
  .card-shadow:before {
    content: none;
  }
}

.card-reflection {
  display: inline-block;
  position: relative;
}

.card-reflection::before {
  content: "";
  position: absolute;
  bottom: -38%;
  height: 50%;
  width: 100%;
  filter: blur(18px);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
}

@media only screen and (max-width: 760px) {
  .card-reflection::before {
    display: none;
  }
}

/*----------------------------------------------------------------------------*/
/*! | Iconic paragraph                                                                    */
/*----------------------------------------------------------------------------*/
.iconic {
  position: relative;
  padding-left: 2.6rem;
}

.iconic.sprite:before {
  position: absolute;
  left: 0;
  top: -.3rem;
}

.iconic--right {
  padding-left: 0;
  padding-right: 2.6rem;
}

.iconic--right.sprite:before {
  left: auto;
  right: 0;
}

/*----------------------------------------------------------------------------*/
/*! | Column set                                                              */
/*----------------------------------------------------------------------------*/
.column-set {
  display: flex;
  justify-content: space-between;
}

@media only screen and (max-width: 890px) {
  .column-set {
    display: block;
  }
}

.column-set__column {
  flex: 50%;
  padding-right: 2rem;
}

@media only screen and (max-width: 890px) {
  .column-set__column {
    padding: 0;
  }
}

.column-set__column + .column-set__column {
  padding-left: 2rem;
  padding-right: 0;
}

@media only screen and (max-width: 1200px) {
  .column-set__column + .column-set__column {
    padding: 0;
  }
}

/*----------------------------------------------------------------------------*/
/*! | Button                                                                  */
/*----------------------------------------------------------------------------*/
.button {
  background-color: #f92961;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-align: center;
  font-size: 1.2rem;
  display: inline-block;
  margin: 1em .4em;
  padding: .6em 2.8em;
  line-height: 1.5em;
  position: relative;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.button:first-of-type {
  margin-left: 0;
}

.button:last-of-type {
  margin-right: 0;
}

@media only screen and (max-width: 425px) {
  .button {
    width: 100%;
    margin: 1em 0;
    padding: .6em 1.2em;
  }
}

.button:hover {
  box-shadow: 0 0 0 2px #f92961 inset, 0 0 0 4px inset, 0 0.2rem 0.6rem rgba(0, 0, 0, 0.4) inset;
}

.button--small {
  font-size: 0.8rem;
  padding: .38em 1.2em;
}

.button--secondary {
  background-color: transparent;
  color: #f92961;
  box-shadow: 0 0 0 1px inset;
}

.button--secondary:hover {
  background-color: #f8f8f5;
  box-shadow: 0 0 0 3px inset, 0 0.2rem 0.4rem rgba(0, 0, 0, 0.2) inset;
}

.button--disabled {
  background-color: #bab8b7;
  color: #e3e3da;
  border-color: transparent;
  cursor: not-allowed;
}

.button--disabled:hover {
  background-color: #bab8b7;
  box-shadow: none;
}

.button--tertiary {
  background-color: transparent;
  color: #f92961;
  padding: .6em 0;
}

.button--tertiary:hover {
  box-shadow: none;
  background-color: transparent;
}

.button--tertiary::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: .3em;
  width: 100%;
  height: 3px;
  background-color: transparent;
  transition: background-color 0.2s ease-in-out;
}

.button--tertiary:hover::before {
  background-color: #f92961;
}

.button--caution {
  background-color: #f9C20e;
}

.button--caution:hover {
  box-shadow: 0 0 0 2px #f9C20e inset, 0 0 0 4px inset, 0 0.2rem 0.6rem rgba(0, 0, 0, 0.4) inset;
}

.button--warning {
  background-color: #f33939;
}

.button--warning:hover {
  box-shadow: 0 0 0 2px #f33939 inset, 0 0 0 4px inset, 0 0.2rem 0.6rem rgba(0, 0, 0, 0.4) inset;
}

.button--wide {
  width: 20rem;
}

@media only screen and (max-width: 425px) {
  .button--wide {
    width: 100%;
  }
}

.button + .tip {
  margin-top: -.5rem;
}

.button--cta-chrome {
  background: linear-gradient(to right, #f92961 0%, #ff668f 50%, #f92961 52%, #f92961 100%);
  background-size: 200%;
  background-position: -90%;
  animation: cta_chrome 5s;
  animation-iteration-count: infinite;
}

@keyframes cta_chrome {
  0% {
    background-position: -90%;
  }
  50% {
    background-position: -90%;
  }
  99.9999% {
    background-position: -290%;
  }
  100% {
    background-position: -90%;
  }
}

.button--cta-beacon {
  position: relative;
}

.button--cta-beacon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  margin: -.5rem 0 0 -.5rem;
  background-color: #09b1e9;
  z-index: -10;
  transform-origin: center;
  transform-style: flat;
  animation: cta_beacon 5s cubic-bezier(0, 0.71, 0.41, 1);
  animation-iteration-count: infinite;
}

@keyframes cta_beacon {
  0% {
    transform: scale(1);
    opacity: .3;
  }
  50% {
    transform: scale(1);
    opacity: .3;
  }
  100% {
    transform: scale(23);
    opacity: 0;
  }
}

/*----------------------------------------------------------------------------*/
/*! | Tabs                                                                      */
/*----------------------------------------------------------------------------*/
.tabs {
  margin: 2rem 0 6rem;
}

@media only screen and (max-width: 578px) {
  .tabs {
    display: flex;
  }
}

.tabs__nav-bar {
  background-color: rgba(9, 177, 233, 0.1);
}

@media only screen and (max-width: 578px) {
  .tabs__nav-bar {
    border-right: 2px solid #09b1e9;
  }
}

.tabs__nav {
  display: flex;
  justify-content: center;
  max-width: 70rem;
  padding: 0 2rem;
  margin: 0 auto 2rem;
  border-bottom: 2px solid #09b1e9;
}

@media only screen and (max-width: 578px) {
  .tabs__nav {
    display: block;
    border-bottom: none;
    margin: 0;
    padding: 0;
  }
}

.tabs__button {
  position: relative;
  max-width: 13rem;
  padding: .5rem 1.5rem;
  text-align: center;
  color: #09b1e9;
  flex-grow: 1;
}

@media only screen and (max-width: 890px) {
  .tabs__button {
    font-size: 0.8rem;
  }
}

@media only screen and (max-width: 578px) {
  .tabs__button {
    display: block;
    font-size: 0;
  }
}

.tabs__button:hover {
  background-color: rgba(9, 177, 233, 0.2);
}

.tabs__button--current, .tabs__button--current:hover {
  background-color: #09b1e9;
  color: #fff;
}

.tabs__button.sprite::before {
  display: block;
  margin: 2rem auto;
  transform: scale(2.8);
  position: relative;
  z-index: 10;
}

@media only screen and (max-width: 890px) {
  .tabs__button.sprite::before {
    transform: scale(2);
    margin: 1rem auto;
  }
}

.tabs__button::after {
  content: "";
  position: absolute;
  top: 0;
  background-color: rgba(255, 255, 255, 0.2);
  left: 0;
  width: 0%;
  bottom: 0;
  z-index: 1;
}

.tabs__button--timer::after {
  width: 100%;
  transition: width 10s linear;
}

.tabs__button span {
  position: relative;
  z-index: 10;
}

.tabs__container {
  max-width: 74rem;
  padding: 0 2rem;
  margin: auto;
}

@media only screen and (max-width: 578px) {
  .tabs__container {
    padding: 0 2rem;
  }
}

.tabs__content {
  display: none;
}

.tabs__content--current {
  display: block;
}

/*----------------------------------------------------------------------------*/
/*! | Header                                                                  */
/*----------------------------------------------------------------------------*/
.header {
  background-color: #09b1e9;
  padding: .2rem 2rem;
  position: relative;
  z-index: 20;
}

.header--white, .header--transparent {
  background-color: #fff;
  margin-top: 1rem;
}

.header--white .nav-menu .menu-item-223 a:before, .header--transparent .nav-menu .menu-item-223 a:before {
  background-position: 0 -2.1rem;
}

.header--transparent {
  background-color: transparent;
  margin-bottom: -4.5rem;
}

.nav-menu {
  text-align: center;
  position: relative;
  z-index: 100;
}

.nav-menu li {
  display: inline-block;
}

.nav-menu .menu-item-223 a {
  font-size: 0;
  line-height: 0;
}

.nav-menu .menu-item-223 a:before {
  content: "";
  display: inline-block;
  height: 2.1rem;
  width: 7rem;
  background: url(img/logo.svg) no-repeat;
  background-size: 7rem 4.2rem;
  position: relative;
  top: -.1rem;
}

.nav-menu a {
  display: inline-block;
  vertical-align: top;
  background-color: rgba(255, 255, 255, 0);
  color: #fff;
  text-decoration: none;
  line-height: 2rem;
  padding: .5rem 1rem;
  transition: background-color 0.2s ease-in-out;
}

.nav-menu a:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/*----------------------------------------------------------------------------*/
/*! | Footer                                                                  */
/*----------------------------------------------------------------------------*/
.footer--blue {
  margin-top: 4rem;
  background: linear-gradient(to bottom, #09b1e9 0%, #006b8f 100%);
}

.footer--blue .footer-love {
  color: #fff;
}

.section--copyright .sprite--atomia::before {
  transform: scale(2.8);
  height: 1rem;
  background-position: -16rem -.5rem;
  margin-bottom: .7rem;
}

.footer-love {
  color: #939190;
  opacity: .7;
  text-align: center;
  margin: 0;
}

.footer-love .sprite--heart {
  display: inline-block;
}

.footer-love .sprite--heart::before {
  top: -.3rem;
  right: .9rem;
}

/*----------------------------------------------------------------------------*/
/*! | Hero                                                                    */
/*----------------------------------------------------------------------------*/
.hero-work {
  background: url(img/home/hero_wide@2x.png) center bottom no-repeat;
  background-size: cover;
  min-height: 56rem;
  z-index: 15;
  margin-bottom: -3rem;
}

@media only screen and (max-width: 1440px) {
  .hero-work {
    min-height: 49rem;
    background-size: 173vw;
  }
}

@media only screen and (max-width: 1200px) {
  .hero-work {
    min-height: 42rem;
  }
}

@media only screen and (max-width: 578px) {
  .hero-work {
    min-height: 36rem;
    background-size: 277vw;
    background-position-x: -84vw;
  }
}

.hero-work h1 {
  margin-bottom: 0;
}

@media only screen and (max-width: 425px) {
  .hero-work h1 {
    margin-top: 1.2em;
  }
}

.hero-work__more {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  bottom: 0;
}

@media only screen and (max-width: 1200px) {
  .hero-work__more {
    bottom: -1rem;
  }
}

.hero-work__more::before {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -1.4rem;
}

/*----------------------------------------------------------------------------*/
/*! | Websites perfected                                                      */
/*----------------------------------------------------------------------------*/
.ws-perf {
  padding: 8rem 0 6rem;
}

.ws-perf h1 {
  margin: 0 0 .8rem;
}

.ws-perf p {
  font-size: 1.4rem;
  margin-bottom: .8rem;
}

@media only screen and (max-width: 890px) {
  .ws-perf figure {
    margin-top: 2rem;
  }
}

.ws-perf figure img {
  display: block;
  margin: 0 auto;
  width: auto;
  height: auto;
}

/*----------------------------------------------------------------------------*/
/*! | Main points                                                             */
/*----------------------------------------------------------------------------*/
.main-points__item {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-bottom: 5rem;
}

@media only screen and (max-width: 760px) {
  .main-points__item {
    flex-direction: column;
  }
}

.main-points__item--reverse {
  flex-direction: row-reverse;
}

@media only screen and (max-width: 760px) {
  .main-points__item--reverse {
    flex-direction: column;
  }
}

.main-points__item--reverse .main-points__caption {
  padding: 0 2rem 0 0;
}

@media only screen and (max-width: 760px) {
  .main-points__item--reverse .main-points__caption {
    padding: 2rem 0 0;
  }
}

.main-points__figure img {
  height: auto;
}

.main-points__caption {
  max-width: 30rem;
  padding-left: 2rem;
}

@media only screen and (max-width: 760px) {
  .main-points__caption {
    padding: 2rem 0 0;
  }
}

.main-points__caption h3 {
  margin-top: 0;
}

/*----------------------------------------------------------------------------*/
/*! | Why Impress?                                                            */
/*----------------------------------------------------------------------------*/
.box-set {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.box-set__box {
  max-width: 20rem;
  padding: 2rem;
  margin: 2rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid #e3e3da;
  box-shadow: 0 0 3rem rgba(0, 0, 0, 0.1);
}

.box-set__image {
  text-align: center;
  padding: 4rem 0 5rem;
}

.box-set__image::before {
  transform: scale(4);
}

.box-set__desc > *:first-child {
  margin-top: 0;
}

/*----------------------------------------------------------------------------*/
/*! | FAQ                                                                     */
/*----------------------------------------------------------------------------*/
.faq .section__margins {
  padding-left: 20rem;
}

@media only screen and (max-width: 760px) {
  .faq .section__margins {
    padding-left: 2rem;
  }
}

.faq .section__margins::before {
  content: "";
  position: absolute;
  left: 2rem;
  width: 222px;
  height: 362px;
  background: url(img/home/l_faq@2x.png);
  background-size: contain;
}

@media only screen and (max-width: 760px) {
  .faq .section__margins::before {
    position: static;
    display: block;
    margin: 0 auto -3rem;
  }
}

/*----------------------------------------------------------------------------*/
/*! | CTA                                                                     */
/*----------------------------------------------------------------------------*/
.top-cta {
  position: fixed;
  top: 1rem;
  left: calc(50% + 5rem);
  transform: translateX(-50%);
  z-index: 50;
  width: 40rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s;
  z-index: 20;
}

@media only screen and (max-width: 1200px) {
  .top-cta {
    width: 66%;
  }
}

@media only screen and (max-width: 578px) {
  .top-cta {
    width: calc(100% - 4rem);
    left: 50%;
  }
}

.top-cta--visible {
  pointer-events: all;
  opacity: 1;
}

.top-cta::before {
  content: "";
  position: absolute;
  left: -9.6rem;
  top: 1rem;
  width: 156px;
  height: 128px;
  background: url(img/home/top-cta@2x.png) left top no-repeat;
  background-size: 156px 128px;
}

@media only screen and (max-width: 578px) {
  .top-cta::before {
    top: auto;
    bottom: -3.8rem;
    left: -1.6rem;
    width: 120px;
  }
}

.top-cta::after {
  content: "";
  position: absolute;
  left: 0;
  top: .3rem;
  width: 100%;
  height: 100%;
  border-radius: 0.5rem;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: -1;
}

.top-cta__content {
  background-color: #09b1e9;
  padding: 1rem;
  border-radius: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media only screen and (max-width: 890px) {
  .top-cta__content {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media only screen and (max-width: 578px) {
  .top-cta__content {
    align-items: flex-end;
  }
}

.top-cta__msg {
  max-width: 30rem;
}

.top-cta__msg p {
  margin: 0;
  color: #fff;
}

@media only screen and (max-width: 578px) {
  .top-cta__msg p {
    text-align: right;
  }
}

.top-cta__action .button {
  white-space: nowrap;
  margin: 0 0 0 1rem;
  padding: .6em 1.2em;
}

@media only screen and (max-width: 890px) {
  .top-cta__action .button {
    margin: 1rem 0 0;
  }
}

@media only screen and (max-width: 578px) {
  .top-cta__action .button {
    font-size: 0.8rem;
    padding: .38em 1.2em;
  }
}

/*----------------------------------------------------------------------------*/
/*! | X-Ray                                                                   */
/*----------------------------------------------------------------------------*/
.x-ray__mbp {
  position: relative;
  width: 100%;
  padding-bottom: 60%;
}

.x-ray__mbp::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(img/home/xray_mbp_hole.svg);
  background-size: contain;
}

.x-ray__display {
  position: absolute;
  top: 7.2%;
  left: 12.6%;
  width: 74.9%;
  height: 78%;
  background-image: url(img/home/fast-ws.jpg);
  background-size: cover;
}

.x-ray__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.x-ray__mask {
  fill: #fff;
}

.x-ray__outline {
  fill: transparent;
  stroke: #09b1e9;
  stroke-width: 5;
}

@media only screen and (max-width: 1200px) {
  .x-ray__outline {
    stroke-width: 2;
  }
}

.x-ray__copy {
  margin: 0 8rem;
}

@media only screen and (max-width: 890px) {
  .x-ray__copy {
    margin: 0 4rem;
  }
}

@media only screen and (max-width: 578px) {
  .x-ray__copy {
    margin: 0;
  }
}

.x-ray__copy > *:first-child {
  margin-top: 0;
}

@media only screen and (max-width: 578px) {
  .x-ray__copy h2 {
    text-align: center;
  }
}

/*----------------------------------------------------------------------------*/
/*! | Slide                                                                   */
/*----------------------------------------------------------------------------*/
.slide {
  display: flex;
  align-items: flex-start;
}

@media only screen and (max-width: 890px) {
  .slide {
    display: block;
  }
}

.slide__figure {
  order: 2;
  width: 70%;
  height: auto;
}

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

.slide__caption {
  order: 1;
}

.slide h3 {
  margin: 1rem 0 .6rem;
}

.slide h3,
.slide p {
  padding: 0 1rem;
}

@media only screen and (max-width: 578px) {
  .slide h3,
  .slide p {
    padding: 0;
  }
}

/*----------------------------------------------------------------------------*/
/*! | Integration                                                             */
/*----------------------------------------------------------------------------*/
.integration {
  min-height: 50vw;
  z-index: 5;
  overflow: hidden;
  background: linear-gradient(to bottom, #ffffff 0%, #e4e5e7 100%);
  box-shadow: 0 0 5rem rgba(0, 0, 0, 0.1) inset;
}

@media only screen and (max-width: 1200px) {
  .integration {
    padding: 20rem 0 0;
  }
}

@media only screen and (max-width: 890px) {
  .integration {
    padding: 10rem 0 0;
  }
}

.integration__content {
  position: relative;
  z-index: 200;
  max-width: 48rem;
  margin: 4rem auto;
  padding: 4rem 6rem;
  border-radius: 0.5rem;
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 3rem rgba(0, 0, 0, 0.1);
}

@media only screen and (max-width: 1200px) {
  .integration__content {
    margin: 2rem auto;
    padding: 2rem 4rem;
  }
}

@media only screen and (max-width: 890px) {
  .integration__content {
    max-width: none;
    margin: 2rem;
    padding: 2rem;
  }
}

.integration__content > *:first-child {
  margin-top: 0;
}

.integration__content > *:last-child {
  margin-bottom: 0;
}

.parallax {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.parallax--bottom {
  z-index: 10;
}

.parallax--bottom .brand-card {
  filter: blur(15px);
  transform: scale(0.4);
}

.parallax--middle {
  z-index: 20;
}

.parallax--middle .brand-card {
  filter: blur(8px);
  transform: scale(0.6);
}

.parallax--top {
  z-index: 30;
}

.brand-card {
  background-color: #e3e3da;
  width: 20vw;
  padding-top: 12vw;
  margin: 1rem auto;
  border-radius: 0.5rem;
  position: absolute;
}

.brand-card::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 15vw;
  height: 10vw;
  background-image: url(img/home/integration.svg);
  background-size: 75vw 75vw;
  background-position: 0  -2.5vw;
}

.brand-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 56%;
  height: 100%;
  border-radius: 0.5rem 0 0 0.5rem;
  -webkit-clip-path: polygon(0 0, 100% 0, 59% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 59% 100%, 0% 100%);
  background: linear-gradient(rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 90%);
}

.brand-card--atomia {
  background-color: #da0f68;
  top: 35vw;
  left: 51vw;
}

.brand-card--hostbill {
  background-color: #2e2a51;
  top: 18vw;
  left: 66vw;
}

.brand-card--hostbill::before {
  background-position: -45vw  -2.5vw;
}

.brand-card--whmcs {
  background-color: #043755;
  top: 29vw;
  left: 20vw;
}

.brand-card--whmcs::before {
  background-position: -30vw -2.5vw;
}

.brand-card--rest {
  background-color: #09b1e9;
  top: 6vw;
  left: 12vw;
}

.brand-card--rest::before {
  background-position: -15vw  -2.5vw;
}

.brand-card--marketplace-1 {
  background-color: #035BDA;
  top: 33vw;
  left: 39vw;
}

.brand-card--marketplace-1::before {
  background-position: -60vw  -2.5vw;
}

.brand-card--marketplace-2 {
  background-color: #9b5c8f;
  top: 10vw;
  left: 68vw;
}

.brand-card--marketplace-2::before {
  background-position: -30vw  -17.5vw;
}

.brand-card--marketplace-3 {
  background: linear-gradient(135deg, #00afe2 0%, #00b0d8 26%, #00b3c0 51%, #00b7a3 74%, #41b680 100%);
  top: 17vw;
  left: 47vw;
}

.brand-card--marketplace-3::before {
  background-position: -15vw  -17.5vw;
}

.brand-card--marketplace-4 {
  background-color: #e13730;
  top: 20vw;
  left: 19vw;
}

.brand-card--marketplace-4::before {
  background-position: 0  -17.5vw;
}

.brand-card--marketplace-5 {
  background-color: #ff8f44;
  top: 11vw;
  left: 5vw;
}

.brand-card--marketplace-6 {
  background-color: #dfcc21;
  top: 5vw;
  left: 73vw;
}

.brand-card--marketplace-7 {
  background-color: #bedb7a;
  top: 19vw;
  left: 41vw;
}

.brand-card--marketplace-8 {
  background-color: #b2ddee;
  top: 34vw;
  left: 77vw;
}

.brand-card--marketplace-9 {
  background-color: #768bff;
  top: 27vw;
  left: 22vw;
}

/*----------------------------------------------------------------------------*/
/*! | Benefit                                                                 */
/*----------------------------------------------------------------------------*/
.benefit {
  display: flex;
  max-width: 60rem;
  margin: 4rem auto;
  align-items: center;
}

@media only screen and (max-width: 760px) {
  .benefit {
    display: block;
  }
}

.benefit--reverse {
  flex-direction: row-reverse;
}

.benefit--reverse .benefit__copy {
  padding: 0 0 0 2rem;
}

@media only screen and (max-width: 760px) {
  .benefit--reverse .benefit__copy {
    padding: 0;
  }
}

.benefit__copy {
  flex-basis: 55%;
  padding-right: 2rem;
}

@media only screen and (max-width: 760px) {
  .benefit__copy {
    padding: 0;
  }
}

.benefit__copy h3 {
  margin-top: 0;
}

.benefit__copy p:last-child {
  margin-bottom: 0;
}

.benefit__image {
  flex-basis: 45%;
}

@media only screen and (max-width: 760px) {
  .benefit__image {
    max-width: 24rem;
    margin: 2rem auto;
    display: block;
  }
}

.benefit + .benefit {
  margin-top: 6rem;
}

/*----------------------------------------------------------------------------*/
/*! | Inputbox                                                                */
/*----------------------------------------------------------------------------*/
.inputbox {
  margin-bottom: 2rem;
}

.inputbox :focus {
  outline: none;
  box-shadow: 0 0 0 2px #09b1e9 inset;
}

.inputbox ::placeholder {
  color: rgba(49, 47, 48, 0.4);
}

.inputbox__label {
  display: block;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: #5f5d5c;
  padding: 0 .8rem .3rem;
  width: 20rem;
}

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

.inputbox__label-optional {
  color: #939190;
  margin-left: .5rem;
  text-transform: none;
}

.inputbox__wrap {
  position: relative;
  display: inline-block;
  background-color: #f8f8f5;
  border: 1px solid #bab8b7;
  border-radius: 0.25rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
}

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

.inputbox__wrap hr {
  margin: 0 1rem;
  border-color: #bab8b7;
}

.inputbox__wrap--row {
  font-size: 0;
}

.inputbox__wrap--row > * {
  font-size: 1rem;
}

.inputbox__wrap--row .inputbox__input {
  width: calc(20rem / 2);
}

@media only screen and (max-width: 425px) {
  .inputbox__wrap--row .inputbox__input {
    width: 50%;
  }
}

.inputbox__wrap--row .inputbox__select {
  width: calc(20rem / 2);
}

@media only screen and (max-width: 425px) {
  .inputbox__wrap--row .inputbox__select {
    width: 100%;
  }
}

@media only screen and (max-width: 425px) {
  .inputbox__wrap--tight {
    width: auto;
  }
}

.inputbox__input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.25rem;
  border: 2px solid transparent;
  background: none;
  color: #312f30;
  font-family: "Rubik", sans-serif;
  width: 20rem;
  padding: 0 1.2rem;
  line-height: 2.8rem;
}

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

.inputbox__input--error {
  border-color: #f33939;
  background-color: rgba(243, 57, 57, 0.05);
}

.inputbox__input--error:focus {
  box-shadow: 0 0 0 3px #09b1e9 inset;
}

.inputbox__input--color {
  padding-left: 10rem;
  text-align: right;
}

.inputbox__input + .inputbox__input {
  display: block;
}

.sprite > .inputbox__input {
  padding-left: 2.6rem;
}

.inputbox__color {
  position: relative;
  display: block;
}

.inputbox__color-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 1.2rem;
  padding-left: 2.4rem;
  line-height: 2.8rem;
  color: rgba(49, 47, 48, 0.4);
  pointer-events: none;
}

.inputbox__input--color:focus + .inputbox__color-label {
  z-index: 100;
}

.inputbox__color-dot {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.2);
}

.inputbox__select-wrap {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
}

.inputbox__wrap--row .inputbox__select-wrap {
  width: auto;
}

@media only screen and (max-width: 425px) {
  .inputbox__wrap--row .inputbox__select-wrap {
    width: 50%;
  }
}

.inputbox__select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.25rem;
  border: 2px solid transparent;
  background: none;
  color: #312f30;
  font-family: "Rubik", sans-serif;
  width: 20rem;
  line-height: 2.8rem;
  padding: 0 2.8rem 0 1.2rem;
  cursor: pointer;
}

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

.inputbox__select--error {
  border-color: #f33939;
  background-color: rgba(243, 57, 57, 0.05);
}

.inputbox__text {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.25rem;
  border: 2px solid transparent;
  background: none;
  color: #312f30;
  font-family: "Rubik", sans-serif;
  width: 20rem;
  display: block;
  height: 8rem;
  resize: none;
  padding: .8rem 1.2rem;
  line-height: 1.4em;
}

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

.inputbox__text--error {
  border-color: #f33939;
  background-color: rgba(243, 57, 57, 0.05);
}

.inputbox__vr {
  display: inline-block;
  margin-right: -1px;
  height: 1.6rem;
  vertical-align: middle;
  border-left: 1px solid #bab8b7;
}

.inputbox__message {
  display: block;
  font-size: 0.8rem;
  color: #939190;
  width: 20rem;
  padding: .4rem .8rem 0 .8rem;
}

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

.inputbox__checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.25rem;
  border: 2px solid transparent;
  background: none;
  color: #312f30;
  font-family: "Rubik", sans-serif;
  width: 20rem;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
}

.inputbox__checkbox:checked + .inputbox__checkbox-state {
  background-color: #f92961;
}

.inputbox__checkbox--error {
  border-color: #f33939;
  background-color: rgba(243, 57, 57, 0.05);
}

.inputbox__checkbox-state {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1.1rem;
  height: 1.1rem;
  border-radius: .15rem;
  pointer-events: none;
}

.inputbox__checkbox-label {
  display: block;
  margin-left: 3rem;
  margin-top: -1.8rem;
  min-height: 1.8rem;
}

.inputbox__wrap-file {
  position: relative;
  display: inline-block;
  padding: 4rem;
  background-color: #f8f8f5;
  border: 2px dashed #09b1e9;
  border-radius: 0.25rem;
}

.inputbox__wrap-file:hover {
  background-color: rgba(9, 177, 233, 0.1);
}

.inputbox__wrap-file input {
  display: none;
}

.inputbox__wrap-file--image {
  border: none;
}

.inputbox__label-file {
  color: rgba(49, 47, 48, 0.4);
  display: block;
  max-width: calc( 20rem - 8rem);
  text-align: center;
}

@media only screen and (max-width: 425px) {
  .inputbox__label-file {
    max-width: none;
  }
}

.inputbox__label-file:hover {
  color: #312f30;
}

.inputbox .actions {
  margin: 0;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  background-color: transparent;
}

input[type=submit] {
  font-family: "Rubik", sans-serif;
  border: none;
  -webkit-appearance: none;
}

/*----------------------------------------------------------------------------*/
/*! | Form                                                                    */
/*----------------------------------------------------------------------------*/
.form {
  overflow: hidden;
  padding: 2rem 0;
}

.form__letter-container {
  position: relative;
  max-width: 50rem;
  margin: auto;
}

@media only screen and (max-width: 890px) {
  .form__letter-container {
    max-width: 26rem;
  }
}

@media only screen and (max-width: 578px) {
  .form__letter-container {
    max-width: 24rem;
  }
}

.form__letter {
  position: relative;
  background-color: #fff;
  box-shadow: 0 0.6rem 1rem rgba(0, 0, 0, 0.2);
  padding: 3rem;
  transition: transform 2s;
  position: relative;
  z-index: 10;
}

@media only screen and (max-width: 578px) {
  .form__letter {
    padding: 3rem 2rem;
  }
}

.form__letter::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: .8rem;
  width: 100%;
  background: linear-gradient(120deg, #1199f6 0%, #1199f6 37%, #ffffff 37%, #ffffff 45%, #f33939 45%, #f33939 87%, #ffffff 87%, #ffffff 95%, #1199f6 95%, #1199f6 100%);
  background-size: 8rem .8rem;
}

.form__letter--sent {
  transform: translate(100vw, 0);
}

.form__letter h2 {
  color: #09b1e9;
  margin-top: 0;
}

.form__letter p {
  color: #5f5d5c;
}

.form__wrap {
  display: flex;
  text-align: left;
}

@media only screen and (max-width: 890px) {
  .form__wrap {
    display: block;
  }
}

.form__note {
  position: relative;
  border-right: 1px solid #e3e3da;
  padding-right: 3rem;
  margin-right: 3rem;
}

@media only screen and (max-width: 890px) {
  .form__note {
    padding: 0;
    margin: 0 0 2rem;
    border-right: none;
    border-bottom: 1px solid #e3e3da;
  }
}

.form__note--product::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 16rem;
  height: 7rem;
  background: url(img/home/form_dash.png) center center no-repeat;
  background-size: contain;
}

@media only screen and (max-width: 890px) {
  .form__note--product::after {
    position: static;
    display: block;
    margin: 2rem auto;
  }
}

.form__data {
  flex-basis: 20rem;
}

.form__submit {
  text-align: right;
  margin-bottom: 0;
}

@media only screen and (max-width: 890px) {
  .form__submit {
    text-align: center;
  }
}

.form__submit .button {
  margin-bottom: 0;
}

.form__base {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  display: flex;
  padding: 3rem;
  background-color: #08a9de;
  box-shadow: 0 0 1px rgba(255, 255, 255, 0.3), 0 0.2rem 1rem rgba(0, 0, 0, 0.1) inset;
}

.form__base-copy {
  max-width: 30rem;
  margin: auto;
}

.form h1 {
  text-align: center;
  margin-top: 0;
}

/*----------------------------------------------------------------------------*/
/*! | Link                                                                    */
/*----------------------------------------------------------------------------*/
.link {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid #f92961;
}

.link:hover {
  background-color: rgba(9, 177, 233, 0.1);
}

.link--hidden {
  border-bottom-color: transparent;
}

.link--hidden:hover {
  background-color: transparent;
  border-bottom-color: transparent;
}

/*----------------------------------------------------------------------------*/
/*! | Sprites                                                                 */
/*----------------------------------------------------------------------------*/
.sprite::before {
  content: '';
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background-image: url(img/sprites.svg);
  background-size: 30rem 20rem;
}

.sprite--impress::before {
  background-position: 0 0;
}

.sprite--impress-w::before {
  background-position: -2rem 0;
}

.sprite--email::before {
  background-position: -4rem 0;
}

.sprite--phone::before {
  background-position: -6rem 0;
}

.sprite--address::before {
  background-position: -8rem 0;
}

.sprite--twitter::before {
  background-position: -10rem 0;
}

.sprite--facebook::before {
  background-position: -12rem 0;
}

.sprite--linkedin::before {
  background-position: -14rem 0;
}

.sprite--heart::before {
  background-position: -16rem 0;
}

.sprite--arrow-down::before {
  background-position: -18rem 0;
}

.sprite--why1::before {
  background-position: -20rem 0;
}

.sprite--why2::before {
  background-position: -22rem 0;
}

.sprite--why3::before {
  background-position: -24rem 0;
}

.sprite--why4::before {
  background-position: -26rem 0;
}

/*----------------------------------------------------------------------------*/
/*! | Cookiebot consent and declaration                                       */
/*----------------------------------------------------------------------------*/
/* Cookiebot consent */
div#CybotCookiebotDialog {
  font-family: "Rubik", sans-serif;
  padding-top: 1rem;
  border-top: 2px solid #09b1e9;
  box-shadow: 0px 0px 1.6rem rgba(0, 0, 0, 0.2);
}

div#CybotCookiebotDialog div,
div#CybotCookiebotDialog a {
  font-family: "Rubik", sans-serif;
}

div#CybotCookiebotDialog a {
  border-radius: 0.25rem;
}

div#CybotCookiebotDialog #CybotCookiebotDialogBodyContentTitle {
  font-size: 1.2rem;
  margin: 0 0 1.2rem;
  color: #09b1e9;
  font-family: "Rubik", sans-serif;
  font-weight: normal;
}

div#CybotCookiebotDialogDetailBody {
  max-width: 74rem;
  padding: 2rem;
}

div#CybotCookiebotDialogDetailBodyContentTextOverview {
  display: block;
}

/* Cookiebot declaration */
.cookie-declaration .CookieDeclarationType {
  border: none;
  margin: 2rem 0;
  padding: 0;
}

.cookie-declaration a {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid #f92961;
}

.cookie-declaration a:hover {
  background-color: rgba(9, 177, 233, 0.1);
}

.cookie-declaration .CookieDeclarationDialogText,
.cookie-declaration .CookieDeclarationIntro,
.cookie-declaration .CookieDeclarationLastUpdated,
.cookie-declaration #CookieDeclarationUserStatusLabel {
  margin-bottom: 1.2rem;
}

/*----------------------------------------------------------------------------*/
/*! | Utilities                                                               */
/*----------------------------------------------------------------------------*/
.u--align-left {
  text-align: left;
}

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

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

.u--hide {
  display: none;
}

.u--show {
  display: block;
}

.u--trivial {
  opacity: .6;
}

.u--fine-print {
  font-size: 0.8rem;
  line-height: 1.5em;
}

.u--hide-text {
  font-size: 0;
}

.u--full-width {
  width: 100%;
}

.u--input-wide {
  max-width: 20rem;
}

@media only screen and (max-width: 425px) {
  .u--input-wide {
    max-width: none;
  }
}

.u--break {
  word-break: break-all;
}

.u--indent {
  padding-left: 3rem;
}