.main {
  width: 100%;
}

.main__section {
  padding-top: var(--section-top-padding);
  padding-bottom: var(--section-bottom-padding);
}

.main__section--dark {
  position: relative;
  background-color: var(--bg-dark-color);
  color: var(--text-light-color);
}

.main__section--dark-diagonal {
  transform: skewY(var(--skew-angle));
  margin-top: var(--skew-padding);
  margin-bottom: var(--skew-padding);
}

.main__section--dark-diagonal .main__section-container {
  transform: skewY(calc(-1 * var(--skew-angle)));
  padding-top: var(--skew-padding);
  padding-bottom: var(--skew-padding);
}

.main__section--gradient {
  color: var(--text-light-color);
  background: linear-gradient(
    89.96deg,
    var(--bg-gradient-start-color) 0.01%,
    var(--bg-gradient-end-color) 127.04%
  );
}

.main__section--large-margin {
  margin-top: var(--large-margin);
  margin-bottom: var(--large-margin);
  padding-top: var(--large-margin);
  padding-bottom: var(--section-bottom-padding);
}

.main__section-container {
  width: 100%;
  max-width: var(--max-content-width-large);
  margin: 0 auto;
  padding-left: var(--padding-standard);
  padding-right: var(--padding-standard);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.main__section-container--large {
  max-width: var(--max-content-width-large);
}

.section--text-on-left .main__section-container {
  flex-direction: row;
}

.section--text-on-right .main__section-container {
  flex-direction: row-reverse;
}

@media screen and (max-width: 600px) {
  .section--text-on-left .main__section-container,
  .section--text-on-right .main__section-container {
    flex-direction: column;
  }

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

/**
 * Texte
 */

.section__item--text {
  display: flex;
  flex-direction: row;
}

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

.section--text-on-right .section__item--text {
  justify-content: flex-end;
}

.section__item--text--large {
  flex: 2;
}
.section__item--text--small {
  flex: 1;
}

.section__item--text-full {
  margin: 0 auto;
  text-align: center;
  width: 100%;
  max-width: var(--max-content-width-small);
}

.section__item--text-full-large {
  max-width: var(--max-content-width-large);
}

.list__centered {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.list_centered--item {
  flex: 1;
  text-align: center;
  max-width: var(--max-list-width);
}

.list_centered--item:not(:first-child) {
  margin-left: var(--content-padding);
  padding-left: var(--content-padding);
}
.list_centered--item:not(:last-child) {
  margin-right: var(--content-padding);
  padding-right: var(--content-padding);
}

.title-h2 {
  font-size: var(--font-size-very-large);
}

.title-h3 {
  font-size: 100px;
  font-size: var(--font-size-large);
  line-height: calc(var(--font-size-large) * 1.3);
}

.section__title {
  font-weight: bold;
  margin-bottom: var(--font-size-large);
}

.section__title--small {
  font-size: var(--font-size-medium);
  line-height: calc(var(--font-size-medium) * 1.3);
}

.section__paragraph {
  color: var(--text-grey-color);
  font-size: var(--font-size-normal);
  line-height: calc(var(--font-size-normal) * 1.5);
}

.section__paragraph--font-large {
  font-size: var(--font-size-medium);
  line-height: calc(var(--font-size-medium) * 1.5);
}

.section__paragraph + .section__paragraph {
  margin-top: var(--font-size-large);
}

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

.section__paragraph li + li {
  margin-top: 5px;
}

.section__paragraph a {
  color: var(--text-standard-color);
  text-decoration: underline;
}

.section__paragraph--limited {
  max-width: 525px;
  font-size: min(40px, max(25px, 3.1vw));
  line-height: min(55px, max(34px, 4.2vw));
}

.section__logo {
  width: 40px;
  margin-right: var(--padding-large);
}

@media screen and (max-width: 600px) {
  .section__logo {
    display: none;
  }
}

/**
 * Stores
 */

.section__paragraph--stores {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.section__paragraph--stores img {
  height: 60px;
  /*margin-left: calc(2 * var(--content-padding));*/
  margin-right: calc(2 * var(--content-padding));
}

@media screen and (max-width: 480px) {
  .section__paragraph--stores {
    flex-direction: column;
  }

  .section__paragraph--stores img {
    margin-right: 0;
    width: 120px;
    height: auto;
  }
}

/**
 * Video
 */

.section__item--video {
  height: 500px;
  flex: 1;
  text-align: center;
  padding: calc(2 * var(--content-padding));
}

.section__item--video iframe{
  width: 100%;
  height: 100%;
}


/**
 * Image
 */

.section__item--image {
  flex: 1;
  text-align: center;
  padding-top: calc(2 * var(--content-padding));
}

.section__screenshot {
  width: 100%;
  max-width: 500px;
  transform: translateY(2px);
  /*box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);*/
  -webkit-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
  filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
}

.section__brands {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.section__brands-image {
  width:50%;
}

.section__brands-link {
  display: inline-block;
  color: var(--text-dark-color);
  padding: calc(2 * var(--content-padding));
}

@media screen and (max-width: 600px) {
  /*.section__item--image {
    display: none;
  }*/
  .section__brands {
    flex-direction: column;
  }
}

/**
 * Intro section: full screen on desktop
 */

.main__section--intro {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 100px;
}

.main__section--intro .main__section-container {
  max-width: none;
  justify-content: space-evenly;
}

.main__section--intro .section__item--text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-right: var(--padding-standard);
  text-align: center;
}

.main__section--intro .section__item--image {
  padding-left: var(--padding-extra-large);
}

.main__section--intro .section__item--image img {
  width: auto;
  height: auto;
  max-width: 80%;
  max-height: 80vh;
}

.main__section--intro .section__title,
.main__section--intro .section__paragraph  {
  max-width: 600px;
}

.main__section--intro .section__title {
  text-transform: uppercase;
}

@media screen and (max-width: 1000px) {
  .section__paragraph--stores {
    flex-direction: column;
  } 
}

.icon--scroll-down {
  position: absolute;
  left: 50%;
  bottom: 50px;
  transform: translate(-50%, -100%);
}

.icon--scroll-down img {
  width: 30px;
}

@media screen and (max-width: 600px) {
  .icon--scroll-down {
    display: none;
  }
}

/**
 * Tutorial
 */

.list_centered--img-container {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--content-padding);
  border-radius: 50%;
  background-color: rgba(252, 252, 252, 0.2);
}

.list_centered--img-container img {
  width: 30px;
  height: 30px;
}

.list_centered--item h3 {
  margin-bottom: var(--medium-margin);
  font-size: var(--font-size-medium);
}

.list_centered--item p {
  font-size: var(--font-size-small);
  line-height: calc(var(--font-size-small) * 1.25);
}

.list__centered--tutorial .list_centered--item {
  position: relative;
}

.list__centered--tutorial .list_centered--item:not(:last-child):after {
  content: url('../assets/icons/verso-arrow-right.svg');
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(100%, -50%) scale(0.7);
}

@media screen and (max-width: 600px) {
  .list__centered--tutorial {
    flex-direction: column;
    align-items: center;
  }

  .list__centered--tutorial .list_centered--item:not(:last-child) {
    margin-right: 0;
    padding-right: 0;
    margin-bottom: var(--medium-margin);
    padding-bottom: var(--medium-margin);
  }

  .list__centered--tutorial .list_centered--item:not(:first-child) {
    margin-left: 0;
    padding-left: 0;
    margin-top: var(--medium-margin);
    padding-top: var(--small-margin);
  }

  .list__centered--tutorial .list_centered--item:not(:last-child):after {
    content: url(../assets/icons/verso-arrow-right.svg);
    position: absolute;
    top: auto;
    left: 50%;
    right: auto;
    bottom: 0;
    transform: translate(-50%, 100%) scale(0.7) rotate(90deg);
  }
}

/**
 * Faq
 */

 .main__section-container_faq{
}

.gallery__title_faq{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
}

.main__section--intro-faq{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 100px;
}

.faq_quiz{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 100px;
}

.faq_quiz_title{
  box-shadow: 5px 5px 8px 0 rgb(0 0 0);
  height: 75px;
  width: 950px;
  padding: 10px;
  text-align: center;
}

@media screen and (max-width: 600px) {
  .faq_quiz_title{
    height: 100%;
    width: 100%;
  }
}

.description_video_faq{
  position: relative;
  display: flex;
  justify-content: center;
  flex-flow: column;
  margin: 15px;
  padding: 0 70px;
  text-align: justify;
  line-height: 22px;
}

.description_video_faq h1,h2,h3,h4{
  padding: 15px 0;
}

.description_video_faq ul{
  padding: 6px 0;
}


/**
 * Two columns
 */

.main__section-container--two-columns {
  display: flex;
  flex-direction: column;
}

.section__line--two-columns {
  display : flex;
  flex-direction : row;
  font-size: max(25px, min(32px, 2vw));
  font-weight: 500;
  line-height: max(30px, min(45px, 2.4vw));
}

.section__item--two-columns {
  max-width: 364px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  background-color: var(--color-gray);
  border-radius: 20px;
  padding: var(--padding-large);
}

.section__item--two-columns:first-child {
  margin-right: 50px;
  padding-bottom: 0;
  flex-direction: column-reverse;
}

.section__item--two-columns:first-child p {
  margin-top: var(--padding-large);
  margin-bottom: var(--padding-large);
}

.section__item--two-columns img {
  padding-left: 20px;
}

.section__item--two-columns:last-child {
  margin-left: 50px;
}

.section__item--two-columns:last-child p {
  margin-bottom: var(--padding-large);
}

.section__item--two-columns img {
  width: 100%;
  max-width: 260px;
}

.section__item--two-columns:first-child img {
  width: 100%;
  max-width: 230px;
}

/**
 * Users
 */

.main__section--users {
  margin: 0 auto;
  padding-top: 100px;
  padding-left: var(--padding-standard);
  padding-right: var(--padding-standard);
  padding-bottom: 100px;
}

.main__section-container--users {
  flex-direction: column;
  width: 100%;
  padding: 0;
  margin: 0 auto;
  max-width: 1800px;
}

.main__section-container--users h2 {
  font-size: 40px;
  line-height: 56px;
  font-weight: 500;
  padding-left: var(--padding-standard);
  padding-right: var(--padding-standard);
}

.users__row {
  flex: 1;
  display: flex;
  flex-direction: row;
  width: 100%;
}

.banner-customers{
  object-fit: cover;
  width: 100%;
  margin: 20px;
}

.users__cell {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-gray);
  border-radius: 20px;
  padding-top: var(--padding-extra-large);
  padding-left: var(--padding-standard);
  padding-right: var(--padding-standard);
  padding-bottom: var(--padding-extra-large);
}

.users__cell:not(:first-child) {
  margin-left: var(--padding-small);
}

.users__cell:not(:last-child) {
  margin-right: var(--padding-small);
}

.users__cell p {
  font-size: 18px;
  line-height: 25px;
  font-weight: 300;
  padding-right: var(--padding-small);
}

.avatar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
}

.avatar img {
  width: 100px;    
  border-radius: 100%;
}

.avatar span {
  padding-top: var(--padding-small);
}

/**
 * Features
 */

.main__section--features {
  width: 100%;
}

.main__section-container--features {
  display: flex;
  flex-direction: column;
}

.section__line--features {
  display : flex;
  flex-direction : row;
}

.section__line--features:first-child {
  margin-bottom: 100px;
}

.section__item--features:first-child {
  margin-right: 50px;
}

.section__item--features:last-child {
  margin-left: 50px;
}

.section__item--features {
  max-width: 364px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  background-color: var(--color-gray);
  border-radius: 20px;
  padding-top: var(--padding-extra-extra-large);
  padding-left: var(--padding-large);
  padding-right: var(--padding-large);
  padding-bottom: var(--padding-extra-extra-large);
}

.section__item--features img {
  width: 100%;
  max-width: 160px;
  padding-bottom: var(--padding-large);
}

.section__item--features h3 {
  text-transform: uppercase;
  font-size: 24px;
  font-weight: bold;
  padding-bottom: var(--padding-large);
}

.section__item--features p {
  font-size: 18px;
  font-weight: 400;
  line-height: 25.2px;
}

/**
 * Contact us
 */

.main__section--contactus {
  background-color: var(--color-blue);
  padding: var(--padding-extra-extra-large) var(--padding-standard);
  text-transform: uppercase;
  /* margin-bottom: 200px; */
}

.main__section--contactus .section__title{
  margin: 0;
}


/**
 * Community
 */

.main__section--community {
  background-color: var(--color-blue);
  padding: var(--padding-extra-extra-large) var(--padding-standard);
  text-transform: uppercase;
  /* margin-top: 200px;
  margin-bottom: 200px; */
}

.list__centered--community {
  width: 100%;
  max-width: var(--max-community-width);
  margin-left: auto;
  margin-right: auto;
  justify-content: space-evenly;
}

.list__centered--community img {
  height: 50px;
}

.section__item--community-input {
  width: 100%;
  max-width: 100%;
  max-width: var(--max-community-width);
  margin-bottom: var(--large-margin);
  padding: var(--content-padding);
  border-radius: var(--medium-margin);
  border: none;
  text-align: center;
  box-sizing: border-box;
}

.section__item--community-input::placeholder {
  color: var(--text-lightgrey-color);
}

/**
 * Sponsorship
 */

.list__centered--sponsorship {
  width: 100%;
  max-width: var(--max-community-width);
  margin: 0 auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--medium-margin);
  margin-bottom: var(--very-large-margin);
  align-items: stretch;
}

.list__centered--sponsorship li {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: var(--content-padding);
  padding-bottom: var(--content-padding);
  position: relative;
}

.list__centered--sponsorship li:not(:first-child) {
  padding-left: calc(var(--content-padding) * 4);
}

.list__centered--sponsorship li:not(:last-child) {
  padding-right: calc(var(--content-padding) * 4);
}

.list__centered--sponsorship img {
  height: 70px;
  margin-bottom: var(--small-margin);
  padding: var(--content-padding);
}

.list__centered--sponsorship span {
  background-color: var(--bg-light-grey-color);
  border-radius: var(--button-border-radius);
  padding: var(--medium-margin);
  font-weight: bold;
  color: var(--text-dark-grey-color);
  font-size: var(--font-size-normal);
  line-height: calc(var(--font-size-normal) * 1.5);
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.list__centered--sponsorship li:not(:last-child):after {
  content: url('../assets/icons/verso-icon-plus.png');
  position: absolute;
  top: calc(50% + (70px + var(--small-margin)) / 2);
  right: 0;
  transform: translate(50%, -50%) scale(0.7);
}

@media screen and (max-width: 600px) {
  .list__centered--sponsorship {
    flex-direction: column;
    align-items: center;
  }

  .list__centered--sponsorship li {
    flex: 1;
  }

  .list__centered--sponsorship li:not(:last-child) {
    padding-bottom: var(--large-margin);
  }

  .list__centered--sponsorship li:not(:last-child):after {
    content: url(../assets/icons/verso-icon-plus.png);
    position: absolute;
    top: auto;
    left: 50%;
    right: auto;
    bottom: 4px;
    transform: translate(-50%, 50%) scale(0.7);
}
}

/**
 * Partners
 */

.list__centered--partners {
  align-items: center;
  margin-bottom: var(--very-large-margin);
}

.list_centered--partners-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.list_centered--partners-item img {
  width: 100%;
  max-width: 300px;
}

@media screen and (max-width: 600px) {
  .list__centered--partners {
    flex-direction: column;
  }

  .list_centered--item:not(:last-child) {
    margin-right: 0;
    padding-right: 0;
    margin-bottom: var(--content-padding);
    padding-bottom: var(--content-padding);
  }

  .list_centered--item:not(:first-child) {
    margin-top: var(--content-padding);
    padding-top: var(--content-padding);
    margin-left: 0;
    padding-left: 0;
  }
}

/**
 * FAQ
 */

.section__faq {
  color: var(--text-grey-color);
  text-align: left;
  width: 100%;
  max-width: var(--max-faq-width);
  margin: 0 auto;
  padding-bottom: var(--content-padding);
}

.section__faq > div {
  padding-bottom: var(--content-padding);
  font-size: var(--font-size-small);
  overflow-y: hidden;
}

.section__faq--collapsed > div {
  height: 0;
  padding: 0;
}

.section__faq > h4 {
  color: var(--text-dark-grey-color);
  font-size: var(--font-size-normal);
  padding-top: var(--content-padding);
  padding-bottom: var(--content-padding);
  padding-right: 40px;
  cursor: pointer;
  position: relative;
}

.section__faq:not(.section__faq--collapsed) > h4:after {
  content: '';
  background-image: url('../assets/icons/verso-icon-minus.png');
  background-size: 15px;
  position: absolute;
  top: 50%;
  right: 0;
  width: 15px;
  height: 15px;
  transform: translate(0, -50%);
}

.section__faq.section__faq--collapsed > h4:after {
  content: '';
  background-image: url('../assets/icons/verso-icon-plus.png');
  background-size: 15px;
  position: absolute;
  top: 50%;
  right: 0;
  width: 15px;
  height: 15px;
  transform: translate(0, -50%);
}

/**
 * Links
 */

a{
  color: white;
}