/*
* Styles
*/
@font-face {
  font-family: Fellix-SemiBold;
  src: url(fonts/Fellix-SemiBold.otf); }
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  font-family: 'Fellix-SemiBold';
  background-color: #f8f7f4;
  color: #00843D;
  font-size: 15px; }
  @media screen and (min-width: 767px) {
    html,
    body {
      font-size: 2.5vw; } }
  @media screen and (min-width: 1024px) {
    html,
    body {
      font-size: 1.8vw; } }
  @media screen and (min-width: 1500px) {
    html,
    body {
      font-size: 1.5vw; } }

[lang="fr-CA"] .french {
  display: none;
  height: 0;
  width: 0;
  overflow: hidden; }

[lang="en-CA"] .english {
  display: none;
  height: 0;
  width: 0;
  overflow: hidden; }
[lang="en-CA"] .main .tomates[data-text="1"] .french {
  margin-top: 1em; }
@media screen and (min-width: 767px) {
  [lang="en-CA"] .main .tomates[data-text="1"] {
    top: 68%;
    left: 70%; }
    [lang="en-CA"] .main .tomates[data-text="1"] .french {
      transform: rotate(-15deg);
      margin-top: 0; } }
@media screen and (min-width: 1024px) {
  [lang="en-CA"] .main .tomates[data-text="1"] {
    top: 60%;
    left: 80%; }
    [lang="en-CA"] .main .tomates[data-text="1"] .french {
      transform: rotate(-20deg); } }
@media screen and (min-width: 1500px) {
  [lang="en-CA"] .main .tomates[data-text="1"] {
    top: 56%;
    left: 24%; }
    [lang="en-CA"] .main .tomates[data-text="1"] .french {
      transform: rotate(-50deg); } }
[lang="en-CA"] .main .tomates[data-text="2"] {
  top: 39%;
  left: 56%; }
  [lang="en-CA"] .main .tomates[data-text="2"] .french {
    transform: rotate(-21deg); }
  @media screen and (min-width: 767px) {
    [lang="en-CA"] .main .tomates[data-text="2"] {
      top: 52%;
      left: 31%; }
      [lang="en-CA"] .main .tomates[data-text="2"] .french {
        transform: rotate(-53deg); } }
  @media screen and (min-width: 1024px) {
    [lang="en-CA"] .main .tomates[data-text="2"] {
      top: 60%;
      left: 24%; } }
  @media screen and (min-width: 1500px) {
    [lang="en-CA"] .main .tomates[data-text="2"] {
      top: 56%;
      left: 83%; }
      [lang="en-CA"] .main .tomates[data-text="2"] .french {
        transform: rotate(-22deg); } }
[lang="en-CA"] .main .tomates[data-text="3"] {
  top: 67%;
  left: 4%; }
  [lang="en-CA"] .main .tomates[data-text="3"] .french {
    transform: rotate(24deg);
    margin-top: -.5em;
    margin-left: -1em; }
  @media screen and (min-width: 767px) {
    [lang="en-CA"] .main .tomates[data-text="3"] {
      top: 33%;
      left: 64%; }
      [lang="en-CA"] .main .tomates[data-text="3"] .french {
        transform: rotate(47deg);
        margin-top: 0 !important; } }
  @media screen and (min-width: 1024px) {
    [lang="en-CA"] .main .tomates[data-text="3"] {
      top: 29%;
      left: 45%; }
      [lang="en-CA"] .main .tomates[data-text="3"] .french {
        transform: rotate(58deg); } }
  @media screen and (min-width: 1500px) {
    [lang="en-CA"] .main .tomates[data-text="3"] {
      top: 32%;
      left: 46%; }
      [lang="en-CA"] .main .tomates[data-text="3"] .french {
        transform: rotate(50deg); } }

.img-ref {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: .5;
  display: none; }

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 20px;
  z-index: 999;
  position: relative; }
  @media screen and (min-width: 1024px) {
    .header {
      padding: 40px; } }
  @media screen and (min-width: 1500px) {
    .header {
      padding: 67px 85px; } }
  .header__logo {
    width: 165px; }
    @media screen and (min-width: 767px) {
      .header__logo {
        width: 300px; } }
    .header__logo img {
      width: 100%; }
  .header__menu {
    display: flex; }
    .header__menu-item {
      width: 25px; }
      .header__menu-item + .header__menu-item {
        margin-left: 9px; }
      @media screen and (min-width: 767px) {
        .header__menu-item {
          width: 40px; }
          .header__menu-item + .header__menu-item {
            margin-left: 15px; } }
      .header__menu-item svg {
        transition: .25s ease all;
        width: 100%;
        fill: #E4002B; }
        .header__menu-item svg .stfb {
          fill: #E4002B; }
        .header__menu-item svg .stfb1 {
          enable-background: new; }
        .header__menu-item svg .stfb2 {
          fill: #F8F7F4; }
        .header__menu-item svg .stinsta {
          fill: #E4002B; }
        .header__menu-item svg .stinsta1 {
          fill: #F8F7F4; }
        .header__menu-item svg * {
          transition: .25s ease all; }
      .header__menu-item:hover svg,
      .header__menu-item:hover svg .stfb,
      .header__menu-item:hover svg .stinsta,
      .header__menu-item:hover svg .sten,
      .header__menu-item:hover svg .stfr {
        fill: #FFBF3F; }

.main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; }
  .main .tomates {
    position: absolute; }
    .main .tomates.desktop, .main .tomates.tablet {
      display: none; }
    @media screen and (min-width: 767px) {
      .main .tomates.mobile, .main .tomates.desktop {
        display: none; }
      .main .tomates.tablet {
        display: block; } }
    @media screen and (min-width: 1500px) {
      .main .tomates.tablet {
        display: none; }
      .main .tomates.desktop {
        display: block; } }
    .main .tomates[data-tomate="1"] {
      width: 17.28%;
      top: 14%;
      left: 5%; }
      @media screen and (min-width: 1024px) {
        .main .tomates[data-tomate="1"] {
          width: 12.96%;
          top: 25%;
          left: 3%; } }
      @media screen and (min-width: 1500px) {
        .main .tomates[data-tomate="1"] {
          top: 16%;
          left: 2%; } }
    .main .tomates[data-tomate="2"] {
      width: 34.81%;
      top: 18%;
      left: 24%; }
      @media screen and (min-width: 1024px) {
        .main .tomates[data-tomate="2"] {
          width: 26.11%;
          top: 18%;
          left: 19%; } }
      @media screen and (min-width: 1500px) {
        .main .tomates[data-tomate="2"] {
          top: 10%;
          left: 19%; } }
    .main .tomates[data-tomate="3"] {
      width: 34.09%;
      top: 44%;
      left: 3%; }
      @media screen and (min-width: 1024px) {
        .main .tomates[data-tomate="3"] {
          width: 25.57%;
          top: 50%;
          left: 2%; } }
      @media screen and (min-width: 1500px) {
        .main .tomates[data-tomate="3"] {
          top: 39%;
          left: 3%; } }
    .main .tomates[data-tomate="4"] {
      width: 18.55%;
      top: 36%;
      left: 51%; }
      @media screen and (min-width: 1024px) {
        .main .tomates[data-tomate="4"] {
          width: 13.91%;
          top: 42%;
          left: 39%; } }
      @media screen and (min-width: 1500px) {
        .main .tomates[data-tomate="4"] {
          top: 42%;
          left: 38%; } }
    .main .tomates[data-tomate="5"] {
      width: 18.73%;
      top: 64%;
      left: 11%; }
      @media screen and (min-width: 1024px) {
        .main .tomates[data-tomate="5"] {
          width: 14.05%;
          top: 77%;
          left: 10%; } }
      @media screen and (min-width: 1500px) {
        .main .tomates[data-tomate="5"] {
          top: 75%;
          left: 10%; } }
    .main .tomates[data-tomate="6"] {
      width: 26.29%;
      top: 80%;
      left: 12%; }
      @media screen and (min-width: 1024px) {
        .main .tomates[data-tomate="6"] {
          width: 19.72%;
          top: 72%;
          left: 35%; } }
      @media screen and (min-width: 1500px) {
        .main .tomates[data-tomate="6"] {
          top: 69%;
          left: 33%; } }
    .main .tomates[data-tomate="7"] {
      width: 29.77%;
      top: 13%;
      left: 66%; }
      @media screen and (min-width: 1024px) {
        .main .tomates[data-tomate="7"] {
          width: 22.33%;
          top: 17%;
          left: 54%; } }
      @media screen and (min-width: 1500px) {
        .main .tomates[data-tomate="7"] {
          top: 8%;
          left: 54%; } }
    .main .tomates[data-tomate="8"] {
      width: 25.83%;
      top: 52%;
      left: 66%; }
      @media screen and (min-width: 1024px) {
        .main .tomates[data-tomate="8"] {
          width: 25.83%;
          top: 22%;
          left: 66%; } }
    .main .tomates[data-tomate="9"] {
      width: 33.88%;
      top: 65%;
      left: 32%; }
      @media screen and (min-width: 1024px) {
        .main .tomates[data-tomate="9"] {
          width: 25.41%;
          top: 45%;
          left: 54%; } }
      @media screen and (min-width: 1500px) {
        .main .tomates[data-tomate="9"] {
          top: 45%;
          left: 56%; } }
    .main .tomates[data-tomate="10"] {
      width: 18.90%;
      top: 81%;
      left: 76%; }
      @media screen and (min-width: 1024px) {
        .main .tomates[data-tomate="10"] {
          width: 14.19%;
          top: 74%;
          left: 82%; } }
      @media screen and (min-width: 1500px) {
        .main .tomates[data-tomate="10"] {
          top: 70%;
          left: 82%; } }
    .main .tomates[data-tomate="11"] {
      width: 25.30%;
      top: 10%;
      left: 11%; }
    .main .tomates[data-tomate="12"] {
      width: 50.06%;
      top: 13%;
      left: 46%; }
    .main .tomates[data-tomate="13"] {
      width: 50.33%;
      top: 26%;
      left: 12%; }
    .main .tomates[data-tomate="14"] {
      width: 42.13%;
      top: 48%;
      left: 5%; }
    .main .tomates[data-tomate="15"] {
      width: 37.84%;
      top: 45%;
      left: 57%; }
    .main .tomates[data-tomate="16"] {
      width: 53.88%;
      top: 74%;
      left: 10%; }
    .main .tomates[data-tomate="17"] {
      width: 44.08%;
      top: 56%;
      left: 53%; }
    .main .tomates[data-tomate="18"] {
      width: 32.30%;
      top: 87%;
      left: 64%; }
    .main .tomates[data-tomate="19"] {
      width: 19%;
      top: 14%;
      left: 4%; }
      @media screen and (min-width: 1024px) {
        .main .tomates[data-tomate="19"] {
          width: 13.42%;
          top: 17%;
          left: 4%; } }
    .main .tomates[data-tomate="20"] {
      width: 39%;
      top: 17%;
      left: 22%; }
      @media screen and (min-width: 1024px) {
        .main .tomates[data-tomate="20"] {
          width: 27.93%;
          top: 17%;
          left: 18%; } }
    .main .tomates[data-tomate="21"] {
      width: 30%;
      top: 13%;
      left: 66%; }
      @media screen and (min-width: 1024px) {
        .main .tomates[data-tomate="21"] {
          width: 22.13%;
          top: 9%;
          left: 54%; } }
    .main .tomates[data-tomate="22"] {
      width: 36%;
      top: 50%;
      left: 62%; }
      @media screen and (min-width: 1024px) {
        .main .tomates[data-tomate="22"] {
          width: 26.36%;
          top: 22%;
          left: 66%; } }
    .main .tomates[data-tomate="23"] {
      width: 21%;
      top: 35%;
      left: 50%; }
      @media screen and (min-width: 1024px) {
        .main .tomates[data-tomate="23"] {
          width: 14.78%;
          top: 42%;
          left: 38%; } }
    .main .tomates[data-tomate="24"] {
      width: 35%;
      top: 43%;
      left: 3%; }
      @media screen and (min-width: 1024px) {
        .main .tomates[data-tomate="24"] {
          width: 26.25%;
          top: 50%;
          left: 2%; } }
    .main .tomates[data-tomate="25"] {
      width: 37%;
      top: 65%;
      left: 31%; }
      @media screen and (min-width: 1024px) {
        .main .tomates[data-tomate="25"] {
          width: 27%;
          top: 45%;
          left: 53%; } }
    .main .tomates[data-tomate="26"] {
      width: 20%;
      top: 63%;
      left: 11%; }
      @media screen and (min-width: 1024px) {
        .main .tomates[data-tomate="26"] {
          width: 14.43%;
          top: 77%;
          left: 9%; } }
    .main .tomates[data-tomate="27"] {
      width: 28.30%;
      top: 80%;
      left: 11%; }
      @media screen and (min-width: 1024px) {
        .main .tomates[data-tomate="27"] {
          width: 21.17%;
          top: 72%;
          left: 34%; } }
    .main .tomates[data-tomate="28"] {
      width: 18.23%;
      top: 81%;
      left: 76%; }
      @media screen and (min-width: 1024px) {
        .main .tomates[data-tomate="28"] {
          width: 14.23%;
          top: 74%;
          left: 82%; } }
    .main .tomates[data-text] span {
      position: absolute;
      white-space: pre; }
    .main .tomates[data-text="1"] {
      top: 21%;
      left: 2%; }
      .main .tomates[data-text="1"] span {
        transform: rotate(-24deg); }
      @media screen and (min-width: 767px) {
        .main .tomates[data-text="1"] {
          top: 50%;
          left: 32%; }
          .main .tomates[data-text="1"] span {
            transform: rotate(-53deg); } }
      @media screen and (min-width: 1024px) {
        .main .tomates[data-text="1"] {
          top: 60%;
          left: 24%; }
          .main .tomates[data-text="1"] span {
            transform: rotate(-50deg); } }
      @media screen and (min-width: 1500px) {
        .main .tomates[data-text="1"] {
          top: 53%;
          left: 24%; }
          .main .tomates[data-text="1"] span {
            transform: rotate(-50deg); } }
    .main .tomates[data-text="2"] {
      top: 67%;
      left: 4%; }
      .main .tomates[data-text="2"] span {
        transform: rotate(24deg); }
      @media screen and (min-width: 767px) {
        .main .tomates[data-text="2"] {
          top: 33%;
          left: 61%; }
          .main .tomates[data-text="2"] span {
            transform: rotate(47deg); } }
      @media screen and (min-width: 1024px) {
        .main .tomates[data-text="2"] {
          top: 29%;
          left: 42%; }
          .main .tomates[data-text="2"] span {
            transform: rotate(58deg); } }
      @media screen and (min-width: 1500px) {
        .main .tomates[data-text="2"] {
          top: 34%;
          left: 44%; }
          .main .tomates[data-text="2"] span {
            transform: rotate(45deg); } }
    .main .tomates[data-text="3"] {
      top: 39%;
      left: 59%; }
      .main .tomates[data-text="3"] span {
        transform: rotate(-21deg); }
      @media screen and (min-width: 767px) {
        .main .tomates[data-text="3"] {
          top: 72%;
          left: 70%; }
          .main .tomates[data-text="3"] span {
            transform: rotate(-15deg); } }
      @media screen and (min-width: 1024px) {
        .main .tomates[data-text="3"] {
          top: 65%;
          left: 81%; }
          .main .tomates[data-text="3"] span {
            transform: rotate(-20deg); } }
      @media screen and (min-width: 1500px) {
        .main .tomates[data-text="3"] {
          top: 56%;
          left: 83%; }
          .main .tomates[data-text="3"] span {
            transform: rotate(-22deg); } }

/*# sourceMappingURL=styles-first.css.map */