/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"Archivo","arguments":[{"subsets":["latin"],"display":"swap","variable":"--font-archivo"}],"variableName":"archivo"} ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/b06b356f834173cc-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/23d669af23d19c95-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/1a4aa50920b5315c-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Archivo Fallback';src: local("Arial");ascent-override: 88.96%;descent-override: 21.28%;line-gap-override: 0.00%;size-adjust: 98.70%
}.__className_fab2aa {font-family: 'Archivo', 'Archivo Fallback';font-style: normal
}.__variable_fab2aa {--font-archivo: 'Archivo', 'Archivo Fallback'
}

/*!***********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/base/reset.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************/
abbr,
address,
article,
aside,
audio,
b,
blockquote,
body,
body div,
caption,
cite,
code,
dd,
del,
dfn,
dl,
dt,
em,
fieldset,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
p,
pre,
q,
samp,
section,
small,
span,
strong,
sub,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
ul,
var,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
article,
aside,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}
embed,
img,
object {
  max-width: 100%;
}
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:after,
blockquote:before,
q:after,
q:before {
  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;
}
th {
  font-weight: 700;
  vertical-align: bottom;
}
td {
  font-weight: 400;
  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;
  white-space: pre-wrap;
  white-space: pre-line;
  word-wrap: break-word;
}
input[type=radio] {
  vertical-align: text-bottom;
}
input[type=checkbox] {
  vertical-align: bottom;
}
input,
select,
textarea {
  font: 100% sans-serif;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: inherit;
}
small {
  font-size: 85%;
}
td,
td img {
  vertical-align: top;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
}
sup {
  top: -.5em;
}
sub {
  bottom: -.25em;
}
code,
kbd,
pre,
samp {
  font-family: monospace, sans-serif;
}
.clickable,
button,
input[type=button],
input[type=submit] {
  cursor: pointer;
}
button,
input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
}
button,
input,
select,
textarea {
  margin: 0;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}
.clearfix:after,
.clearfix:before {
  content: " ";
  display: block;
  height: 0;
  overflow: hidden;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  zoom: 1;
}
body {
  font:
    16px Helmet,
    Freesans,
    sans-serif;
}
body,
html {
  width: 100%;
  min-height: 100%;
}
a,
button {
  cursor: pointer;
  font-size: 100%;
}
button {
  border: 0;
  padding: 0;
  margin: 0;
}
* {
  box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
}

/*!***************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/base/variables.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************/
:root {
  --split-type:"lines";
  --split-initial-y:105%;
  --split-duration:1.1s;
  --split-easing:cubic-bezier(0.23,1,0.32,1);
  --split-stagger-word:0.15s;
  --split-stagger-char:0.03s;
}

/*!***************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/base/utilities.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************/
.fade-in,
.page-content {
  --out-delay:0s;
  --in-delay:0s;
  --duration:0.95s;
  --easing:cubic-bezier(0.25,0.46,0.45,0.94);
  visibility: hidden;
  opacity: 0;
  transition: var(--duration) var(--easing) var(--out-delay);
  transition-property: opacity, visibility;
  pointer-events: none;
}
#smooth-content.display .page-content,
.display.page-content,
.fade-in.display {
  visibility: inherit;
  opacity: 1;
  transition-delay: var(--in-delay);
  pointer-events: unset;
}
.split-blur {
  opacity: 0;
  --blur:2.5px;
}
.split-blur .anim--split__word {
  transition: filter 1s cubic-bezier(.445, .05, .55, .95);
  filter: blur(var(--blur));
  transform: unset;
}
#smooth-content.display .split-blur .anim--split__word.page-content,
.split-blur #smooth-content.display .anim--split__word.page-content,
.split-blur .anim--split__word.display {
  filter: none;
}
.lazyload,
.lazyloading {
  opacity: 0 !important;
}
.lazyloaded {
  opacity: 1;
  transition: opacity .8s;
}

/*!**********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/base/grid.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************/
.wrapper {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 100px;
}
.wrapper--full {
  max-width: none;
  padding: 0;
}
@media only screen and (max-width: 900px) {
  .wrapper {
    padding: 0 20px;
  }
}
.row {
  margin-left: -10px;
  margin-right: -10px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
.row--h-center {
  justify-content: center;
}
.row--h-end {
  justify-content: flex-end;
}
.row--h-around {
  justify-content: space-around;
}
.row--h-between {
  justify-content: space-between;
}
.row--v-center {
  align-items: center;
}
.row--v-end {
  align-items: flex-end;
}
.row--v-stretch {
  align-items: stretch;
}
.row--center {
  justify-content: center;
  align-items: center;
}
.row--column {
  flex-direction: column;
}
.row--nowrap {
  flex-wrap: nowrap;
}
.col-1 {
  padding-left: 10px;
  padding-right: 10px;
  width: 8.3333333333%;
}
.ie .col-1 {
  width: 8%;
}
.offset-1 {
  margin-left: 8.3333333333%;
}
.ie .offset-1 {
  margin-left: 8%;
}
.col-2 {
  padding-left: 10px;
  padding-right: 10px;
  width: 16.6666666667%;
}
.ie .col-2 {
  width: 17%;
}
.offset-2 {
  margin-left: 16.6666666667%;
}
.ie .offset-2 {
  margin-left: 17%;
}
.col-3 {
  padding-left: 10px;
  padding-right: 10px;
}
.col-3,
.ie .col-3 {
  width: 25%;
}
.ie .offset-3,
.offset-3 {
  margin-left: 25%;
}
.col-4 {
  padding-left: 10px;
  padding-right: 10px;
  width: 33.3333333333%;
}
.ie .col-4 {
  width: 33%;
}
.offset-4 {
  margin-left: 33.3333333333%;
}
.ie .offset-4 {
  margin-left: 33%;
}
.col-5 {
  padding-left: 10px;
  padding-right: 10px;
  width: 41.6666666667%;
}
.ie .col-5 {
  width: 42%;
}
.offset-5 {
  margin-left: 41.6666666667%;
}
.ie .offset-5 {
  margin-left: 42%;
}
.col-6 {
  padding-left: 10px;
  padding-right: 10px;
}
.col-6,
.ie .col-6 {
  width: 50%;
}
.ie .offset-6,
.offset-6 {
  margin-left: 50%;
}
.col-7 {
  padding-left: 10px;
  padding-right: 10px;
  width: 58.3333333333%;
}
.ie .col-7 {
  width: 58%;
}
.offset-7 {
  margin-left: 58.3333333333%;
}
.ie .offset-7 {
  margin-left: 58%;
}
.col-8 {
  padding-left: 10px;
  padding-right: 10px;
  width: 66.6666666667%;
}
.ie .col-8 {
  width: 67%;
}
.offset-8 {
  margin-left: 66.6666666667%;
}
.ie .offset-8 {
  margin-left: 67%;
}
.col-9 {
  padding-left: 10px;
  padding-right: 10px;
}
.col-9,
.ie .col-9 {
  width: 75%;
}
.ie .offset-9,
.offset-9 {
  margin-left: 75%;
}
.col-10 {
  padding-left: 10px;
  padding-right: 10px;
  width: 83.3333333333%;
}
.ie .col-10 {
  width: 83%;
}
.offset-10 {
  margin-left: 83.3333333333%;
}
.ie .offset-10 {
  margin-left: 83%;
}
.col-11 {
  padding-left: 10px;
  padding-right: 10px;
  width: 91.6666666667%;
}
.ie .col-11 {
  width: 92%;
}
.offset-11 {
  margin-left: 91.6666666667%;
}
.ie .offset-11 {
  margin-left: 92%;
}
.col-12 {
  padding-left: 10px;
  padding-right: 10px;
}
.col-12,
.ie .col-12 {
  width: 100%;
}
.ie .offset-12,
.offset-12 {
  margin-left: 100%;
}
@media screen and (max-width:only screen and (max-width:1280px)) {
  .col-desktop-1 {
    width: 8.3333333333%;
  }
  .ie .col-desktop-1 {
    width: 8%;
  }
  .offset-desktop-1 {
    margin-left: 8.3333333333%;
  }
  .ie .offset-desktop-1 {
    margin-left: 8%;
  }
  .col-desktop-2 {
    width: 16.6666666667%;
  }
  .ie .col-desktop-2 {
    width: 17%;
  }
  .offset-desktop-2 {
    margin-left: 16.6666666667%;
  }
  .ie .offset-desktop-2 {
    margin-left: 17%;
  }
  .col-desktop-3,
  .ie .col-desktop-3 {
    width: 25%;
  }
  .ie .offset-desktop-3,
  .offset-desktop-3 {
    margin-left: 25%;
  }
  .col-desktop-4 {
    width: 33.3333333333%;
  }
  .ie .col-desktop-4 {
    width: 33%;
  }
  .offset-desktop-4 {
    margin-left: 33.3333333333%;
  }
  .ie .offset-desktop-4 {
    margin-left: 33%;
  }
  .col-desktop-5 {
    width: 41.6666666667%;
  }
  .ie .col-desktop-5 {
    width: 42%;
  }
  .offset-desktop-5 {
    margin-left: 41.6666666667%;
  }
  .ie .offset-desktop-5 {
    margin-left: 42%;
  }
  .col-desktop-6,
  .ie .col-desktop-6 {
    width: 50%;
  }
  .ie .offset-desktop-6,
  .offset-desktop-6 {
    margin-left: 50%;
  }
  .col-desktop-7 {
    width: 58.3333333333%;
  }
  .ie .col-desktop-7 {
    width: 58%;
  }
  .offset-desktop-7 {
    margin-left: 58.3333333333%;
  }
  .ie .offset-desktop-7 {
    margin-left: 58%;
  }
  .col-desktop-8 {
    width: 66.6666666667%;
  }
  .ie .col-desktop-8 {
    width: 67%;
  }
  .offset-desktop-8 {
    margin-left: 66.6666666667%;
  }
  .ie .offset-desktop-8 {
    margin-left: 67%;
  }
  .col-desktop-9,
  .ie .col-desktop-9 {
    width: 75%;
  }
  .ie .offset-desktop-9,
  .offset-desktop-9 {
    margin-left: 75%;
  }
  .col-desktop-10 {
    width: 83.3333333333%;
  }
  .ie .col-desktop-10 {
    width: 83%;
  }
  .offset-desktop-10 {
    margin-left: 83.3333333333%;
  }
  .ie .offset-desktop-10 {
    margin-left: 83%;
  }
  .col-desktop-11 {
    width: 91.6666666667%;
  }
  .ie .col-desktop-11 {
    width: 92%;
  }
  .offset-desktop-11 {
    margin-left: 91.6666666667%;
  }
  .ie .offset-desktop-11 {
    margin-left: 92%;
  }
  .col-desktop-12,
  .ie .col-desktop-12 {
    width: 100%;
  }
  .ie .offset-desktop-12,
  .offset-desktop-12 {
    margin-left: 100%;
  }
  .offset-desktop-0 {
    margin-left: 0;
  }
}
@media screen and (max-width: 1024px) {
  .col-tabletH-1 {
    width: 8.3333333333%;
  }
  .ie .col-tabletH-1 {
    width: 8%;
  }
  .offset-tabletH-1 {
    margin-left: 8.3333333333%;
  }
  .ie .offset-tabletH-1 {
    margin-left: 8%;
  }
  .col-tabletH-2 {
    width: 16.6666666667%;
  }
  .ie .col-tabletH-2 {
    width: 17%;
  }
  .offset-tabletH-2 {
    margin-left: 16.6666666667%;
  }
  .ie .offset-tabletH-2 {
    margin-left: 17%;
  }
  .col-tabletH-3,
  .ie .col-tabletH-3 {
    width: 25%;
  }
  .ie .offset-tabletH-3,
  .offset-tabletH-3 {
    margin-left: 25%;
  }
  .col-tabletH-4 {
    width: 33.3333333333%;
  }
  .ie .col-tabletH-4 {
    width: 33%;
  }
  .offset-tabletH-4 {
    margin-left: 33.3333333333%;
  }
  .ie .offset-tabletH-4 {
    margin-left: 33%;
  }
  .col-tabletH-5 {
    width: 41.6666666667%;
  }
  .ie .col-tabletH-5 {
    width: 42%;
  }
  .offset-tabletH-5 {
    margin-left: 41.6666666667%;
  }
  .ie .offset-tabletH-5 {
    margin-left: 42%;
  }
  .col-tabletH-6,
  .ie .col-tabletH-6 {
    width: 50%;
  }
  .ie .offset-tabletH-6,
  .offset-tabletH-6 {
    margin-left: 50%;
  }
  .col-tabletH-7 {
    width: 58.3333333333%;
  }
  .ie .col-tabletH-7 {
    width: 58%;
  }
  .offset-tabletH-7 {
    margin-left: 58.3333333333%;
  }
  .ie .offset-tabletH-7 {
    margin-left: 58%;
  }
  .col-tabletH-8 {
    width: 66.6666666667%;
  }
  .ie .col-tabletH-8 {
    width: 67%;
  }
  .offset-tabletH-8 {
    margin-left: 66.6666666667%;
  }
  .ie .offset-tabletH-8 {
    margin-left: 67%;
  }
  .col-tabletH-9,
  .ie .col-tabletH-9 {
    width: 75%;
  }
  .ie .offset-tabletH-9,
  .offset-tabletH-9 {
    margin-left: 75%;
  }
  .col-tabletH-10 {
    width: 83.3333333333%;
  }
  .ie .col-tabletH-10 {
    width: 83%;
  }
  .offset-tabletH-10 {
    margin-left: 83.3333333333%;
  }
  .ie .offset-tabletH-10 {
    margin-left: 83%;
  }
  .col-tabletH-11 {
    width: 91.6666666667%;
  }
  .ie .col-tabletH-11 {
    width: 92%;
  }
  .offset-tabletH-11 {
    margin-left: 91.6666666667%;
  }
  .ie .offset-tabletH-11 {
    margin-left: 92%;
  }
  .col-tabletH-12,
  .ie .col-tabletH-12 {
    width: 100%;
  }
  .ie .offset-tabletH-12,
  .offset-tabletH-12 {
    margin-left: 100%;
  }
  .offset-tabletH-0 {
    margin-left: 0;
  }
}
@media screen and (max-width:only screen and (max-width:900px)) {
  .col-tablet-1 {
    width: 8.3333333333%;
  }
  .ie .col-tablet-1 {
    width: 8%;
  }
  .offset-tablet-1 {
    margin-left: 8.3333333333%;
  }
  .ie .offset-tablet-1 {
    margin-left: 8%;
  }
  .col-tablet-2 {
    width: 16.6666666667%;
  }
  .ie .col-tablet-2 {
    width: 17%;
  }
  .offset-tablet-2 {
    margin-left: 16.6666666667%;
  }
  .ie .offset-tablet-2 {
    margin-left: 17%;
  }
  .col-tablet-3,
  .ie .col-tablet-3 {
    width: 25%;
  }
  .ie .offset-tablet-3,
  .offset-tablet-3 {
    margin-left: 25%;
  }
  .col-tablet-4 {
    width: 33.3333333333%;
  }
  .ie .col-tablet-4 {
    width: 33%;
  }
  .offset-tablet-4 {
    margin-left: 33.3333333333%;
  }
  .ie .offset-tablet-4 {
    margin-left: 33%;
  }
  .col-tablet-5 {
    width: 41.6666666667%;
  }
  .ie .col-tablet-5 {
    width: 42%;
  }
  .offset-tablet-5 {
    margin-left: 41.6666666667%;
  }
  .ie .offset-tablet-5 {
    margin-left: 42%;
  }
  .col-tablet-6,
  .ie .col-tablet-6 {
    width: 50%;
  }
  .ie .offset-tablet-6,
  .offset-tablet-6 {
    margin-left: 50%;
  }
  .col-tablet-7 {
    width: 58.3333333333%;
  }
  .ie .col-tablet-7 {
    width: 58%;
  }
  .offset-tablet-7 {
    margin-left: 58.3333333333%;
  }
  .ie .offset-tablet-7 {
    margin-left: 58%;
  }
  .col-tablet-8 {
    width: 66.6666666667%;
  }
  .ie .col-tablet-8 {
    width: 67%;
  }
  .offset-tablet-8 {
    margin-left: 66.6666666667%;
  }
  .ie .offset-tablet-8 {
    margin-left: 67%;
  }
  .col-tablet-9,
  .ie .col-tablet-9 {
    width: 75%;
  }
  .ie .offset-tablet-9,
  .offset-tablet-9 {
    margin-left: 75%;
  }
  .col-tablet-10 {
    width: 83.3333333333%;
  }
  .ie .col-tablet-10 {
    width: 83%;
  }
  .offset-tablet-10 {
    margin-left: 83.3333333333%;
  }
  .ie .offset-tablet-10 {
    margin-left: 83%;
  }
  .col-tablet-11 {
    width: 91.6666666667%;
  }
  .ie .col-tablet-11 {
    width: 92%;
  }
  .offset-tablet-11 {
    margin-left: 91.6666666667%;
  }
  .ie .offset-tablet-11 {
    margin-left: 92%;
  }
  .col-tablet-12,
  .ie .col-tablet-12 {
    width: 100%;
  }
  .ie .offset-tablet-12,
  .offset-tablet-12 {
    margin-left: 100%;
  }
  .offset-tablet-0 {
    margin-left: 0;
  }
}
@media screen and (max-width: 900px) {
  .col-tabletW-1 {
    width: 8.3333333333%;
  }
  .ie .col-tabletW-1 {
    width: 8%;
  }
  .offset-tabletW-1 {
    margin-left: 8.3333333333%;
  }
  .ie .offset-tabletW-1 {
    margin-left: 8%;
  }
  .col-tabletW-2 {
    width: 16.6666666667%;
  }
  .ie .col-tabletW-2 {
    width: 17%;
  }
  .offset-tabletW-2 {
    margin-left: 16.6666666667%;
  }
  .ie .offset-tabletW-2 {
    margin-left: 17%;
  }
  .col-tabletW-3,
  .ie .col-tabletW-3 {
    width: 25%;
  }
  .ie .offset-tabletW-3,
  .offset-tabletW-3 {
    margin-left: 25%;
  }
  .col-tabletW-4 {
    width: 33.3333333333%;
  }
  .ie .col-tabletW-4 {
    width: 33%;
  }
  .offset-tabletW-4 {
    margin-left: 33.3333333333%;
  }
  .ie .offset-tabletW-4 {
    margin-left: 33%;
  }
  .col-tabletW-5 {
    width: 41.6666666667%;
  }
  .ie .col-tabletW-5 {
    width: 42%;
  }
  .offset-tabletW-5 {
    margin-left: 41.6666666667%;
  }
  .ie .offset-tabletW-5 {
    margin-left: 42%;
  }
  .col-tabletW-6,
  .ie .col-tabletW-6 {
    width: 50%;
  }
  .ie .offset-tabletW-6,
  .offset-tabletW-6 {
    margin-left: 50%;
  }
  .col-tabletW-7 {
    width: 58.3333333333%;
  }
  .ie .col-tabletW-7 {
    width: 58%;
  }
  .offset-tabletW-7 {
    margin-left: 58.3333333333%;
  }
  .ie .offset-tabletW-7 {
    margin-left: 58%;
  }
  .col-tabletW-8 {
    width: 66.6666666667%;
  }
  .ie .col-tabletW-8 {
    width: 67%;
  }
  .offset-tabletW-8 {
    margin-left: 66.6666666667%;
  }
  .ie .offset-tabletW-8 {
    margin-left: 67%;
  }
  .col-tabletW-9,
  .ie .col-tabletW-9 {
    width: 75%;
  }
  .ie .offset-tabletW-9,
  .offset-tabletW-9 {
    margin-left: 75%;
  }
  .col-tabletW-10 {
    width: 83.3333333333%;
  }
  .ie .col-tabletW-10 {
    width: 83%;
  }
  .offset-tabletW-10 {
    margin-left: 83.3333333333%;
  }
  .ie .offset-tabletW-10 {
    margin-left: 83%;
  }
  .col-tabletW-11 {
    width: 91.6666666667%;
  }
  .ie .col-tabletW-11 {
    width: 92%;
  }
  .offset-tabletW-11 {
    margin-left: 91.6666666667%;
  }
  .ie .offset-tabletW-11 {
    margin-left: 92%;
  }
  .col-tabletW-12,
  .ie .col-tabletW-12 {
    width: 100%;
  }
  .ie .offset-tabletW-12,
  .offset-tabletW-12 {
    margin-left: 100%;
  }
  .offset-tabletW-0 {
    margin-left: 0;
  }
}
@media screen and (max-width:only screen and (max-width:480px)) {
  .col-mobile-1 {
    width: 8.3333333333%;
  }
  .ie .col-mobile-1 {
    width: 8%;
  }
  .offset-mobile-1 {
    margin-left: 8.3333333333%;
  }
  .ie .offset-mobile-1 {
    margin-left: 8%;
  }
  .col-mobile-2 {
    width: 16.6666666667%;
  }
  .ie .col-mobile-2 {
    width: 17%;
  }
  .offset-mobile-2 {
    margin-left: 16.6666666667%;
  }
  .ie .offset-mobile-2 {
    margin-left: 17%;
  }
  .col-mobile-3,
  .ie .col-mobile-3 {
    width: 25%;
  }
  .ie .offset-mobile-3,
  .offset-mobile-3 {
    margin-left: 25%;
  }
  .col-mobile-4 {
    width: 33.3333333333%;
  }
  .ie .col-mobile-4 {
    width: 33%;
  }
  .offset-mobile-4 {
    margin-left: 33.3333333333%;
  }
  .ie .offset-mobile-4 {
    margin-left: 33%;
  }
  .col-mobile-5 {
    width: 41.6666666667%;
  }
  .ie .col-mobile-5 {
    width: 42%;
  }
  .offset-mobile-5 {
    margin-left: 41.6666666667%;
  }
  .ie .offset-mobile-5 {
    margin-left: 42%;
  }
  .col-mobile-6,
  .ie .col-mobile-6 {
    width: 50%;
  }
  .ie .offset-mobile-6,
  .offset-mobile-6 {
    margin-left: 50%;
  }
  .col-mobile-7 {
    width: 58.3333333333%;
  }
  .ie .col-mobile-7 {
    width: 58%;
  }
  .offset-mobile-7 {
    margin-left: 58.3333333333%;
  }
  .ie .offset-mobile-7 {
    margin-left: 58%;
  }
  .col-mobile-8 {
    width: 66.6666666667%;
  }
  .ie .col-mobile-8 {
    width: 67%;
  }
  .offset-mobile-8 {
    margin-left: 66.6666666667%;
  }
  .ie .offset-mobile-8 {
    margin-left: 67%;
  }
  .col-mobile-9,
  .ie .col-mobile-9 {
    width: 75%;
  }
  .ie .offset-mobile-9,
  .offset-mobile-9 {
    margin-left: 75%;
  }
  .col-mobile-10 {
    width: 83.3333333333%;
  }
  .ie .col-mobile-10 {
    width: 83%;
  }
  .offset-mobile-10 {
    margin-left: 83.3333333333%;
  }
  .ie .offset-mobile-10 {
    margin-left: 83%;
  }
  .col-mobile-11 {
    width: 91.6666666667%;
  }
  .ie .col-mobile-11 {
    width: 92%;
  }
  .offset-mobile-11 {
    margin-left: 91.6666666667%;
  }
  .ie .offset-mobile-11 {
    margin-left: 92%;
  }
  .col-mobile-12,
  .ie .col-mobile-12 {
    width: 100%;
  }
  .ie .offset-mobile-12,
  .offset-mobile-12 {
    margin-left: 100%;
  }
  .offset-mobile-0 {
    margin-left: 0;
  }
}

/*!***********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/base/fonts.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************/
/*
 * Visit Vietri institutional fonts
 * - Colus   → titles (var(--font-title))
 *   Self-hosted: put the font files in public/fonts/colus/ (see README there).
 *   If the files are missing the build still works and titles use the fallback serif.
 * - Archivo → text, UI, accents (var(--font-text), var(--font-accent))
 *   Loaded with next/font/google in src/app/layout.tsx (exposes --font-archivo on <html>).
 */
@font-face {
  font-family: "Colus";
  src:
    url(/fonts/colus/Colus-Regular.woff2) format("woff2"),
    url(/fonts/colus/Colus-Regular.woff) format("woff"),
    url(/fonts/colus/Colus-Regular.otf) format("opentype"),
    url(/fonts/colus/Colus-Regular.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --font-title: "Colus", "Cinzel", Georgia, "Times New Roman", serif;
  --font-text: var(--font-archivo, "Archivo"), "Helvetica Neue", Arial, sans-serif;
  --font-accent: var(--font-archivo, "Archivo"), "Helvetica Neue", Arial, sans-serif;
}

/*!****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/base/typography.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************/
body,
html {
  color: #fff;
  color: var(--color-white);
  font-family: var(--font-text);
  line-height: 1.6em;
}
.title--serif {
  font-family: var(--font-title);
}
.title--sans {
  font-family: var(--font-accent);
}
.uber-style {
  font-size: clamp(64px, 13.8888888889vw, 300px);
  line-height: 1em;
  font-family: var(--font-title);
}
.h1-style strong,
.h2-style strong,
.h3-style strong,
.h4-style strong,
.multiple-typos strong,
h1 strong,
h2 strong,
h3 strong,
h4 strong {
  font-weight: 400;
  font-family: var(--font-accent);
}
.h1-style,
h1 {
  font-size: clamp(48px, 10vw, 216px);
}
.h1-style,
.h2-style,
h1,
h2 {
  line-height: 1.1em;
  font-family: var(--font-title);
}
.h2-style,
h2 {
  font-size: clamp(40px, 8.3333333333vw, 180px);
}
.h3-style,
h3 {
  font-size: clamp(32px, 4.4444444444vw, 96px);
  line-height: 1.1em;
}
.h3-style,
.h4-style,
h3,
h4 {
  font-family: var(--font-title);
}
.h4-style,
h4 {
  font-size: clamp(24px, 3.3333333333vw, 72px);
  line-height: 1.2em;
}
.h5-style,
h5 {
  font-size: clamp(18px, 1.6666666667vw, 36px);
  line-height: 1.2em;
}
.h5-style,
.h6-style,
h5,
h6 {
  letter-spacing: .05em;
  font-family: var(--font-accent);
}
.h6-style,
h6 {
  font-size: clamp(16px, 1.1111111111vw, 24px);
  line-height: 1.4em;
}
.body-xl-style {
  font-size: clamp(22px, 2.2222222222vw, 48px);
}
.body-l-style,
.body-xl-style {
  line-height: 1.6em;
  font-family: var(--font-text);
}
.body-l-style {
  font-size: clamp(20px, 1.6666666667vw, 36px);
}
.body-m-style {
  font-size: clamp(16px, 1.25vw, 27px);
  line-height: 1.6em;
  font-family: var(--font-text);
}
.body-s-style {
  font-size: 18px;
  line-height: 1.6em;
  font-family: var(--font-text);
}
.body-xs-style {
  font-size: 12px;
  letter-spacing: .05em;
}
.body-xs-style,
.body-xxs-style {
  line-height: 1.4em;
  font-family: var(--font-text);
}
.body-xxs-style {
  font-size: 11px;
  letter-spacing: .02em;
}
.button-style {
  font-size: 12px;
  line-height: 1.4em;
  font-family: var(--font-text);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.title-style {
  font-size: clamp(48px, 9.4444444444vw, 204px);
  line-height: 1.1em;
  font-family: var(--font-title);
}

/*!************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/base/themes.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************/
.epoque--blue,
[data-epoque=blue] {
  /* Azzurro mare */
  --color-theme-light:#B7CAF0;
  --color-theme-normal:#26509F;
  --color-theme-med:#1A3A78;
  --color-theme-dark:#0B1A38;
  --color-theme-contrast:#ffffff;
  --gradient-main:linear-gradient(
      90deg,#26509F 21%,#6E8DC8 51%,#B7CAF0 69%);
  --gradient-title:linear-gradient(
      71.33deg,#474747 52.39%,#1A3A78 65.39%,#26509F 70.88%);
  --gradient-epoque:linear-gradient(
      90deg,#B7CAF0 6.25%,#26509F 20%,#0B1A38 39%,#1e2433 65%);
  --gradient-epoque-reverse:linear-gradient(
      270deg,#B7CAF0 6.25%,#26509F 20%,#0B1A38 39%,#1e2433 65%);
  --gradient-button:linear-gradient(
      111deg,#26509F 45%,hsla(0,0%,100%,0) 97%);
  --gradient-round-button:linear-gradient(
      126deg,hsla(0,0%,100%,0) 10%,#26509F 65%);
}
.epoque--green,
[data-epoque=green] {
  /* Verde natura */
  --color-theme-light:#A6DCC4;
  --color-theme-normal:#288F66;
  --color-theme-med:#1B6648;
  --color-theme-dark:#0A2C1F;
  --color-theme-contrast:#ffffff;
  --gradient-main:linear-gradient(
      90deg,#288F66 21%,#67B695 51%,#A6DCC4 69%);
  --gradient-title:linear-gradient(
      71.33deg,#474747 52.39%,#1B6648 65.39%,#288F66 70.88%);
  --gradient-epoque:linear-gradient(
      90deg,#A6DCC4 6.25%,#288F66 20%,#0A2C1F 39%,#1e2433 65%);
  --gradient-epoque-reverse:linear-gradient(
      270deg,#A6DCC4 6.25%,#288F66 20%,#0A2C1F 39%,#1e2433 65%);
  --gradient-button:linear-gradient(
      111deg,#288F66 45%,hsla(0,0%,100%,0) 97%);
  --gradient-round-button:linear-gradient(
      126deg,hsla(0,0%,100%,0) 10%,#288F66 65%);
}
.epoque--yellow,
[data-epoque=yellow] {
  /* Giallo sole */
  --color-theme-light:#FCE5A3;
  --color-theme-normal:#F5C12E;
  --color-theme-med:#C98B0C;
  --color-theme-dark:#3B2905;
  --color-theme-contrast:#474747;
  --gradient-main:linear-gradient(
      90deg,#C98B0C 21%,#F5C12E 51%,#FCE5A3 69%);
  --gradient-title:linear-gradient(
      71.33deg,#474747 52.39%,#C98B0C 65.39%,#F5C12E 70.88%);
  --gradient-epoque:linear-gradient(
      90deg,#FCE5A3 6.25%,#F5C12E 20%,#3B2905 39%,#1e2433 65%);
  --gradient-epoque-reverse:linear-gradient(
      270deg,#FCE5A3 6.25%,#F5C12E 20%,#3B2905 39%,#1e2433 65%);
  --gradient-button:linear-gradient(
      111deg,#F5C12E 45%,hsla(0,0%,100%,0) 97%);
  --gradient-round-button:linear-gradient(
      126deg,hsla(0,0%,100%,0) 10%,#F5C12E 65%);
}
.epoque--purple,
[data-epoque=purple] {
  /* Multicolore: tutta la palette Visit Vietri */
  --color-theme-light:#F5C12E;
  --color-theme-normal:#26509F;
  --color-theme-med:#288F66;
  --color-theme-dark:#0B1A38;
  --color-theme-contrast:#ffffff;
  --gradient-main:linear-gradient(
      90deg,#3A66B8 21%,#288F66 51%,#F5C12E 69%);
  --gradient-title:linear-gradient(
      71.33deg,#474747 52.39%,#26509F 62%,#288F66 67%,#F5C12E 72%);
  --gradient-epoque:linear-gradient(
      90deg,#F5C12E 6.25%,#288F66 20%,#26509F 30%,#0B1A38 42%,#1e2433 65%);
  --gradient-epoque-reverse:linear-gradient(
      270deg,#F5C12E 6.25%,#288F66 20%,#26509F 30%,#0B1A38 42%,#1e2433 65%);
  --gradient-button:linear-gradient(
      111deg,#26509F 45%,hsla(0,0%,100%,0) 97%);
  --gradient-round-button:linear-gradient(
      126deg,hsla(0,0%,100%,0) 10%,#26509F 65%);
}
.theme--dark,
.theme--primary {
  color: #fff;
  color: var(--color-white);
}
.theme--light {
  color: #474747;
  color: var(--color-text);
}
:root {
  --xxs:16px;
  --xs:32px;
  --s:48px;
  --m:64px;
  --l:80px;
  --xl:144px;
  /* Visit Vietri brand palette */
  --brand-blue:#26509F;
  --brand-green:#288F66;
  --brand-yellow:#F5C12E;
  --brand-gray:#474747;
  /* dark surfaces: "notte sul golfo", a near-black tinted with Azzurro mare */
  --color-black:#1e2433;
  /* body text on light surfaces: Grigio testo */
  --color-text:#474747;
  --color-white:#fff;
  /* light surfaces: warm ceramic white */
  --color-gray:#f4f1ea;
  --color-pink:#fce5a3;
  --color-lighter-pink:#fbf3dd;
  --gradient-landing:linear-gradient(
      91deg,rgba(38,80,159,0.5) 21%,rgba(40,143,102,0.45) 36%,rgba(245,193,46,0.6) 47%,#f6e7bd 64%,rgba(244,241,234,0) 88%);
  --gradient-button:linear-gradient(
      151deg,#f4f1ea 45%,rgba(244,241,234,0) 88%);
  --color-theme-normal:#f4f1ea;
  --color-theme-contrast:#474747;
}
@media only screen and (max-width: 900px) {
  :root {
    --xxs:16px;
    --xs:24px;
    --s:32px;
    --m:40px;
    --l:64px;
  }
}
body {
  background-color: #1e2433;
  background-color: var(--color-black);
  transition: .9s cubic-bezier(.215, .61, .355, 1);
  transition-property: background-color;
  overflow: hidden;
  font-size: clamp(16px, 1.25vw, 27px);
  line-height: 1.6em;
  font-family: var(--font-text);
}
.visually-hidden,
body.desktop .mobile-only,
body:not(.desktop) .desktop-only {
  display: none;
}
.stop-color,
.stop-white {
  stop-color: #f4f1ea;
}
.stop-color {
  stop-color: var(--color-theme-normal);
}
.align--left {
  text-align: left;
}
.align--center {
  text-align: center;
}
.align--right {
  text-align: right;
}
section {
  position: relative;
  z-index: 1;
}
.flexible {
  padding-top: 64px;
  padding-top: var(--m);
  padding-bottom: 64px;
  padding-bottom: var(--m);
}
@media only screen and (max-width: 900px) {
  .flexible {
    padding-top: 48px;
    padding-top: var(--s);
    padding-bottom: 48px;
    padding-bottom: var(--s);
  }
}

/*!************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/base/scroll.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************/
html.lenis {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
  touch-action: none;
}
:root {
  scrollbar-width: none;
}
body {
  width: 100vw;
  min-height: var(--app-height);
  --scrollbar-width:12px;
}
body.loader-out {
  overflow-y: visible;
  overflow-y: initial;
}
body.ios,
body.safari.tablet {
  --scrollbar-width:0px;
}

/*!************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/base/global.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************/
.scrollbar::-webkit-scrollbar {
  width: var(--scrollbar-width);
  background: none;
}
.scrollbar::-webkit-scrollbar-track {
  background: #d8d8d8;
}
.scrollbar::-webkit-scrollbar-thumb {
  background-color: transparent;
  border: 2px solid #d8d8d8;
  box-shadow: inset 0 0 0 1px #474747;
  border-radius: 100px;
}
.scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #474747;
}
.lightbox__scroller,
.no-scrollbar,
body.desktop,
body:not(.desktop) .lightbox [data-lenis-prevent] {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.lightbox__scroller::-webkit-scrollbar,
.no-scrollbar::-webkit-scrollbar,
body.desktop::-webkit-scrollbar,
body:not(.desktop) .lightbox [data-lenis-prevent]::-webkit-scrollbar {
  width: 0;
  display: none;
}
.layout:not(.no-transition) .page-enter-active,
.layout:not(.no-transition) .page-leave-active {
  transition: opacity 1.5s cubic-bezier(.445, .05, .55, .95);
}
.layout:not(.no-transition) .page-enter,
.layout:not(.no-transition) .page-leave-active {
  opacity: 0;
}
.lightbox {
  overscroll-behavior: contain;
}
.lightbox__close {
  background: unset;
  color: unset;
  position: absolute;
  top: 40px;
  right: 40px;
  pointer-events: auto;
  transition: opacity .9s cubic-bezier(.215, .61, .355, 1);
}
.desktop .lightbox__close:focus,
.desktop .lightbox__close:hover {
  opacity: .4;
}
.lightbox__scroller {
  height: 100vh;
  overflow: hidden;
  overflow-y: visible;
  overflow-y: initial;
}
body:not(.desktop) .lightbox [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.blur-link {
  transition: .9s cubic-bezier(.215, .61, .355, 1);
  transition-property: opacity, filter;
  transition-delay: .15s;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
}
.blur-link.blur {
  opacity: .4;
  filter: blur(4px);
  transition-delay: 0s;
}
.wysiwyg p:not(:last-child) {
  margin-bottom: 24px;
}
.wysiwyg a {
  color: unset;
  text-decoration: underline;
  transition: opacity .9s cubic-bezier(.215, .61, .355, 1);
}
.desktop .wysiwyg a:focus,
.desktop .wysiwyg a:hover {
  opacity: .4;
}
.wysiwyg ol,
.wysiwyg ul {
  padding-left: 32px;
  padding-left: var(--xs);
}
.wysiwyg ol:not(:last-child),
.wysiwyg ul:not(:last-child) {
  margin-bottom: 24px;
}
.wysiwyg ul {
  list-style: disc outside;
}
.wysiwyg h2:not(:last-child),
.wysiwyg h3:not(:last-child),
.wysiwyg h4:not(:last-child),
.wysiwyg h5:not(:last-child),
.wysiwyg h6:not(:last-child) {
  margin-bottom: 32px;
  margin-bottom: var(--xs);
}
.theme:not(.theme--light) .wysiwyg h2,
.theme:not(.theme--light) .wysiwyg h3,
.theme:not(.theme--light) .wysiwyg h4,
.theme:not(.theme--light) .wysiwyg h5,
.theme:not(.theme--light) .wysiwyg h6 {
  color: #f4f1ea;
  color: var(--color-theme-normal);
}
.swiper {
  overflow: visible !important;
}
.swiper-button-next,
.swiper-button-prev {
  width: 24px;
  height: 24px;
  cursor: pointer;
  transition: opacity .9s cubic-bezier(.215, .61, .355, 1);
}
.desktop .swiper-button-next:focus,
.desktop .swiper-button-next:hover,
.desktop .swiper-button-prev:focus,
.desktop .swiper-button-prev:hover {
  opacity: .4;
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  opacity: .2;
  cursor: unset;
  pointer-events: none;
}
.swiper-button-next {
  transform: rotate(180deg);
}

/*!************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/vendor/plyr.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************/
@keyframes plyr-progress {
  to {
    background-position: 25px 0;
    background-position: var(--plyr-progress-loading-size,25px) 0;
  }
}
@keyframes plyr-popup {
  0% {
    opacity: .5;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes plyr-fade-in {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.plyr {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  align-items: center;
  direction: ltr;
  display: flex;
  flex-direction: column;
  font-family: inherit;
  font-family: var(--plyr-font-family,inherit);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  font-weight: var(--plyr-font-weight-regular,400);
  height: 100%;
  line-height: 1.7;
  line-height: var(--plyr-line-height,1.7);
  max-width: 100%;
  min-width: 200px;
  position: relative;
  text-shadow: none;
  transition: box-shadow .3s ease;
  z-index: 0;
}
.plyr audio,
.plyr iframe,
.plyr video {
  display: block;
  height: 100%;
  width: 100%;
}
.plyr button {
  font: inherit;
  line-height: inherit;
  width: auto;
}
.plyr:focus {
  outline: 0;
}
.plyr--full-ui {
  box-sizing: border-box;
}
.plyr--full-ui *,
.plyr--full-ui :after,
.plyr--full-ui :before {
  box-sizing: inherit;
}
.plyr--full-ui a,
.plyr--full-ui button,
.plyr--full-ui input,
.plyr--full-ui label {
  touch-action: manipulation;
}
.plyr__badge {
  background: #4a5464;
  background: var(--plyr-badge-background,#4a5464);
  border-radius: 2px;
  border-radius: var(--plyr-badge-border-radius,2px);
  color: #fff;
  color: var(--plyr-badge-text-color,#fff);
  font-size: 9px;
  font-size: var(--plyr-font-size-badge,9px);
  line-height: 1;
  padding: 3px 4px;
}
.plyr--full-ui ::-webkit-media-text-track-container {
  display: none;
}
.plyr__captions {
  animation: plyr-fade-in .3s ease;
  bottom: 0;
  display: none;
  font-size: 13px;
  font-size: var(--plyr-font-size-small,13px);
  left: 0;
  padding: 10px;
  padding: var(--plyr-control-spacing,10px);
  position: absolute;
  text-align: center;
  transition: transform .4s ease-in-out;
  width: 100%;
}
.plyr__captions span:empty {
  display: none;
}
@media (min-width: 480px) {
  .plyr__captions {
    font-size: 15px;
    font-size: var(--plyr-font-size-base,15px);
    padding: 20px;
    padding: calc(var(--plyr-control-spacing, 10px)*2);
  }
}
@media (min-width: 768px) {
  .plyr__captions {
    font-size: 18px;
    font-size: var(--plyr-font-size-large,18px);
  }
}
.plyr--captions-active .plyr__captions {
  display: block;
}
.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions {
  transform: translateY(-40px);
  transform: translateY(calc(var(--plyr-control-spacing, 10px)*-4));
}
.plyr__caption {
  background: rgba(0, 0, 0, .8);
  background: var(--plyr-captions-background,rgba(0,0,0,.8));
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: #fff;
  color: var(--plyr-captions-text-color,#fff);
  line-height: 185%;
  padding: .2em .5em;
  white-space: pre-wrap;
}
.plyr__caption div {
  display: inline;
}
.plyr__control {
  background: 0 0;
  border: 0;
  border-radius: 3px;
  border-radius: var(--plyr-control-radius,3px);
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
  overflow: visible;
  padding: 7px;
  padding: calc(var(--plyr-control-spacing, 10px)*0.7);
  position: relative;
  transition: all .3s ease;
}
.plyr__control svg {
  display: block;
  fill: currentColor;
  height: 18px;
  height: var(--plyr-control-icon-size,18px);
  pointer-events: none;
  width: 18px;
  width: var(--plyr-control-icon-size,18px);
}
.plyr__control:focus {
  outline: 0;
}
.plyr__control.plyr__tab-focus {
  outline-color: #00b3ff;
  outline-color: var(--plyr-tab-focus-color,var(--plyr-color-main,var(--plyr-color-main,#00b3ff)));
  outline-offset: 2px;
  outline-style: dotted;
  outline-width: 3px;
}
a.plyr__control {
  text-decoration: none;
}
.plyr__control.plyr__control--pressed .icon--not-pressed,
.plyr__control.plyr__control--pressed .label--not-pressed,
.plyr__control:not(.plyr__control--pressed) .icon--pressed,
.plyr__control:not(.plyr__control--pressed) .label--pressed,
a.plyr__control:after,
a.plyr__control:before {
  display: none;
}
.plyr--full-ui ::-webkit-media-controls {
  display: none;
}
.plyr__controls {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  text-align: center;
}
.plyr__controls .plyr__progress__container {
  flex: 1 1;
  min-width: 0;
}
.plyr__controls .plyr__controls__item {
  margin-left: 2.5px;
  margin-left: calc(var(--plyr-control-spacing, 10px)/4);
}
.plyr__controls .plyr__controls__item:first-child {
  margin-left: 0;
  margin-right: auto;
}
.plyr__controls .plyr__controls__item.plyr__progress__container {
  padding-left: 2.5px;
  padding-left: calc(var(--plyr-control-spacing, 10px)/4);
}
.plyr__controls .plyr__controls__item.plyr__time {
  padding: 0 5px;
  padding: 0 calc(var(--plyr-control-spacing, 10px)/2);
}
.plyr__controls .plyr__controls__item.plyr__progress__container:first-child,
.plyr__controls .plyr__controls__item.plyr__time + .plyr__time,
.plyr__controls .plyr__controls__item.plyr__time:first-child {
  padding-left: 0;
}
.plyr [data-plyr=airplay],
.plyr [data-plyr=captions],
.plyr [data-plyr=fullscreen],
.plyr [data-plyr=pip],
.plyr__controls:empty {
  display: none;
}
.plyr--airplay-supported [data-plyr=airplay],
.plyr--captions-enabled [data-plyr=captions],
.plyr--fullscreen-enabled [data-plyr=fullscreen],
.plyr--pip-supported [data-plyr=pip] {
  display: inline-block;
}
.plyr__menu {
  display: flex;
  position: relative;
}
.plyr__menu .plyr__control svg {
  transition: transform .3s ease;
}
.plyr__menu .plyr__control[aria-expanded=true] svg {
  transform: rotate(90deg);
}
.plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip {
  display: none;
}
.plyr__menu__container {
  animation: plyr-popup .2s ease;
  background: hsla(0, 0%, 100%, .9);
  background: var(--plyr-menu-background,hsla(0,0%,100%,.9));
  border-radius: 4px;
  bottom: 100%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
  box-shadow: var(--plyr-menu-shadow,0 1px 2px rgba(0,0,0,.15));
  color: #4a5464;
  color: var(--plyr-menu-color,#4a5464);
  font-size: 15px;
  font-size: var(--plyr-font-size-base,15px);
  margin-bottom: 10px;
  position: absolute;
  right: -3px;
  text-align: left;
  white-space: nowrap;
  z-index: 3;
}
.plyr__menu__container > div {
  overflow: hidden;
  transition: height .35s cubic-bezier(.4, 0, .2, 1), width .35s cubic-bezier(.4, 0, .2, 1);
}
.plyr__menu__container:after {
  border: 4px solid transparent;
  border-top: var(--plyr-menu-arrow-size,4px) solid var(--plyr-menu-background,hsla(0,0%,100%,.9));
  border: var(--plyr-menu-arrow-size,4px) solid transparent;
  border-top-color: hsla(0, 0%, 100%, .9);
  content: "";
  height: 0;
  position: absolute;
  right: 14px;
  right: calc(var(--plyr-control-icon-size, 18px)/2 + var(--plyr-control-spacing, 10px)*0.7 - var(--plyr-menu-arrow-size, 4px)/2);
  top: 100%;
  width: 0;
}
.plyr__menu__container [role=menu] {
  padding: 7px;
  padding: calc(var(--plyr-control-spacing, 10px)*0.7);
}
.plyr__menu__container [role=menuitem],
.plyr__menu__container [role=menuitemradio] {
  margin-top: 2px;
}
.plyr__menu__container [role=menuitem]:first-child,
.plyr__menu__container [role=menuitemradio]:first-child {
  margin-top: 0;
}
.plyr__menu__container .plyr__control {
  align-items: center;
  color: #4a5464;
  color: var(--plyr-menu-color,#4a5464);
  display: flex;
  font-size: 13px;
  font-size: var(--plyr-font-size-menu,var(--plyr-font-size-small,13px));
  padding: 4.66667px 10.5px;
  padding: calc(var(--plyr-control-spacing, 10px)*0.7/1.5) calc(var(--plyr-control-spacing, 10px)*0.7*1.5);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  width: 100%;
}
.plyr__menu__container .plyr__control > span {
  align-items: inherit;
  display: flex;
  width: 100%;
}
.plyr__menu__container .plyr__control:after {
  border: 4px solid transparent;
  border: var(--plyr-menu-item-arrow-size,4px) solid transparent;
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.plyr__menu__container .plyr__control--forward {
  padding-right: 28px;
  padding-right: calc(var(--plyr-control-spacing, 10px)*0.7*4);
}
.plyr__menu__container .plyr__control--forward:after {
  border-left-color: #728197;
  border-left-color: var(--plyr-menu-arrow-color,#728197);
  right: 6.5px;
  right: calc(var(--plyr-control-spacing, 10px)*0.7*1.5 - var(--plyr-menu-item-arrow-size, 4px));
}
.plyr__menu__container .plyr__control--forward.plyr__tab-focus:after,
.plyr__menu__container .plyr__control--forward:hover:after {
  border-left-color: currentColor;
}
.plyr__menu__container .plyr__control--back {
  font-weight: 400;
  font-weight: var(--plyr-font-weight-regular,400);
  margin: 7px;
  margin: calc(var(--plyr-control-spacing, 10px)*0.7);
  margin-bottom: 3.5px;
  margin-bottom: calc(var(--plyr-control-spacing, 10px)*0.7/2);
  padding-left: 28px;
  padding-left: calc(var(--plyr-control-spacing, 10px)*0.7*4);
  position: relative;
  width: calc(100% - 14px);
  width: calc(100% - var(--plyr-control-spacing, 10px)*0.7*2);
}
.plyr__menu__container .plyr__control--back:after {
  border-right-color: #728197;
  border-right-color: var(--plyr-menu-arrow-color,#728197);
  left: 6.5px;
  left: calc(var(--plyr-control-spacing, 10px)*0.7*1.5 - var(--plyr-menu-item-arrow-size, 4px));
}
.plyr__menu__container .plyr__control--back:before {
  background: #dcdfe5;
  background: var(--plyr-menu-back-border-color,#dcdfe5);
  box-shadow: 0 1px 0 #fff;
  box-shadow: 0 1px 0 var(--plyr-menu-back-border-shadow-color,#fff);
  content: "";
  height: 1px;
  left: 0;
  margin-top: 3.5px;
  margin-top: calc(var(--plyr-control-spacing, 10px)*0.7/2);
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 100%;
}
.plyr__menu__container .plyr__control--back.plyr__tab-focus:after,
.plyr__menu__container .plyr__control--back:hover:after {
  border-right-color: currentColor;
}
.plyr__menu__container .plyr__control[role=menuitemradio] {
  padding-left: 7px;
  padding-left: calc(var(--plyr-control-spacing, 10px)*0.7);
}
.plyr__menu__container .plyr__control[role=menuitemradio]:after,
.plyr__menu__container .plyr__control[role=menuitemradio]:before {
  border-radius: 100%;
}
.plyr__menu__container .plyr__control[role=menuitemradio]:before {
  background: rgba(0, 0, 0, .1);
  content: "";
  display: block;
  flex-shrink: 0;
  height: 16px;
  margin-right: 10px;
  margin-right: var(--plyr-control-spacing,10px);
  transition: all .3s ease;
  width: 16px;
}
.plyr__menu__container .plyr__control[role=menuitemradio]:after {
  background: #fff;
  border: 0;
  height: 6px;
  left: 12px;
  opacity: 0;
  top: 50%;
  transform: translateY(-50%) scale(0);
  transition: transform .3s ease, opacity .3s ease;
  width: 6px;
}
.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:before {
  background: #00b3ff;
  background: var(--plyr-control-toggle-checked-background,var(--plyr-color-main,var(--plyr-color-main,#00b3ff)));
}
.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
.plyr__menu__container .plyr__control[role=menuitemradio].plyr__tab-focus:before,
.plyr__menu__container .plyr__control[role=menuitemradio]:hover:before {
  background: rgba(35, 40, 47, .1);
}
.plyr__menu__container .plyr__menu__value {
  align-items: center;
  display: flex;
  margin-left: auto;
  margin-right: calc(-7px - -2);
  margin-right: calc(var(--plyr-control-spacing, 10px)*0.7*-1 - -2);
  overflow: hidden;
  padding-left: 24.5px;
  padding-left: calc(var(--plyr-control-spacing, 10px)*0.7*3.5);
  pointer-events: none;
}
.plyr--full-ui input[type=range] {
  -webkit-appearance: none;
  background: 0 0;
  border: 0;
  border-radius: 26px;
  border-radius: calc(var(--plyr-range-thumb-height, 13px)*2);
  color: #00b3ff;
  color: var(--plyr-range-fill-background,var(--plyr-color-main,var(--plyr-color-main,#00b3ff)));
  display: block;
  height: 19px;
  height: calc(var(--plyr-range-thumb-active-shadow-width, 3px)*2 + var(--plyr-range-thumb-height, 13px));
  margin: 0;
  padding: 0;
  transition: box-shadow .3s ease;
  width: 100%;
}
.plyr--full-ui input[type=range]::-webkit-slider-runnable-track {
  background: 0 0;
  border: 0;
  border-radius: 2.5px;
  border-radius: calc(var(--plyr-range-track-height, 5px)/2);
  height: 5px;
  height: var(--plyr-range-track-height,5px);
  -webkit-transition: box-shadow .3s ease;
  transition: box-shadow .3s ease;
  -webkit-user-select: none;
  user-select: none;
  background-image:
    linear-gradient(
      90deg,
      currentColor 0,
      transparent 0);
  background-image:
    linear-gradient(
      90deg,
      currentColor var(--value,0),
      transparent var(--value,0));
}
.plyr--full-ui input[type=range]::-webkit-slider-thumb {
  background: #fff;
  background: var(--plyr-range-thumb-background,#fff);
  border: 0;
  border-radius: 100%;
  box-shadow: 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .2);
  box-shadow: var(--plyr-range-thumb-shadow,0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2));
  height: 13px;
  height: var(--plyr-range-thumb-height,13px);
  position: relative;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  width: 13px;
  width: var(--plyr-range-thumb-height,13px);
  -webkit-appearance: none;
  margin-top: -4px;
  margin-top: calc(var(--plyr-range-thumb-height, 13px)/2*-1 - var(--plyr-range-track-height, 5px)/2*-1);
}
.plyr--full-ui input[type=range]::-moz-range-track {
  background: 0 0;
  border: 0;
  border-radius: 2.5px;
  border-radius: calc(var(--plyr-range-track-height, 5px)/2);
  height: 5px;
  height: var(--plyr-range-track-height,5px);
  -moz-transition: box-shadow .3s ease;
  transition: box-shadow .3s ease;
  -moz-user-select: none;
  user-select: none;
}
.plyr--full-ui input[type=range]::-moz-range-thumb {
  background: #fff;
  background: var(--plyr-range-thumb-background,#fff);
  border: 0;
  border-radius: 100%;
  box-shadow: 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .2);
  box-shadow: var(--plyr-range-thumb-shadow,0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2));
  height: 13px;
  height: var(--plyr-range-thumb-height,13px);
  position: relative;
  -moz-transition: all .2s ease;
  transition: all .2s ease;
  width: 13px;
  width: var(--plyr-range-thumb-height,13px);
}
.plyr--full-ui input[type=range]::-moz-range-progress {
  background: currentColor;
  border-radius: 2.5px;
  border-radius: calc(var(--plyr-range-track-height, 5px)/2);
  height: 5px;
  height: var(--plyr-range-track-height,5px);
}
.plyr--full-ui input[type=range]::-ms-track {
  color: transparent;
}
.plyr--full-ui input[type=range]::-ms-fill-upper,
.plyr--full-ui input[type=range]::-ms-track {
  background: 0 0;
  border: 0;
  border-radius: 2.5px;
  border-radius: calc(var(--plyr-range-track-height, 5px)/2);
  height: 5px;
  height: var(--plyr-range-track-height,5px);
  -ms-transition: box-shadow .3s ease;
  transition: box-shadow .3s ease;
  user-select: none;
}
.plyr--full-ui input[type=range]::-ms-fill-lower {
  background: 0 0;
  border: 0;
  border-radius: 2.5px;
  border-radius: calc(var(--plyr-range-track-height, 5px)/2);
  height: 5px;
  height: var(--plyr-range-track-height,5px);
  -ms-transition: box-shadow .3s ease;
  transition: box-shadow .3s ease;
  user-select: none;
  background: currentColor;
}
.plyr--full-ui input[type=range]::-ms-thumb {
  background: #fff;
  background: var(--plyr-range-thumb-background,#fff);
  border: 0;
  border-radius: 100%;
  box-shadow: 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .2);
  box-shadow: var(--plyr-range-thumb-shadow,0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2));
  height: 13px;
  height: var(--plyr-range-thumb-height,13px);
  position: relative;
  -ms-transition: all .2s ease;
  transition: all .2s ease;
  width: 13px;
  width: var(--plyr-range-thumb-height,13px);
  margin-top: 0;
}
.plyr--full-ui input[type=range]::-ms-tooltip {
  display: none;
}
.plyr--full-ui input[type=range]:focus {
  outline: 0;
}
.plyr--full-ui input[type=range]::-moz-focus-outer {
  border: 0;
}
.plyr--full-ui input[type=range].plyr__tab-focus::-webkit-slider-runnable-track {
  outline-color: #00b3ff;
  outline-color: var(--plyr-tab-focus-color,var(--plyr-color-main,var(--plyr-color-main,#00b3ff)));
  outline-offset: 2px;
  outline-style: dotted;
  outline-width: 3px;
}
.plyr--full-ui input[type=range].plyr__tab-focus::-moz-range-track {
  outline-color: #00b3ff;
  outline-color: var(--plyr-tab-focus-color,var(--plyr-color-main,var(--plyr-color-main,#00b3ff)));
  outline-offset: 2px;
  outline-style: dotted;
  outline-width: 3px;
}
.plyr--full-ui input[type=range].plyr__tab-focus::-ms-track {
  outline-color: #00b3ff;
  outline-color: var(--plyr-tab-focus-color,var(--plyr-color-main,var(--plyr-color-main,#00b3ff)));
  outline-offset: 2px;
  outline-style: dotted;
  outline-width: 3px;
}
.plyr__poster {
  background-color: #000;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity .2s ease;
  width: 100%;
  z-index: 1;
}
.plyr--stopped.plyr__poster-enabled .plyr__poster {
  opacity: 1;
}
.plyr__time {
  font-size: 13px;
  font-size: var(--plyr-font-size-time,var(--plyr-font-size-small,13px));
}
.plyr__time + .plyr__time:before {
  content: "\2044";
  margin-right: 10px;
  margin-right: var(--plyr-control-spacing,10px);
}
@media (max-width:calc(768px - 1)) {
  .plyr__time + .plyr__time {
    display: none;
  }
}
.plyr__tooltip {
  background: hsla(0, 0%, 100%, .9);
  background: var(--plyr-tooltip-background,hsla(0,0%,100%,.9));
  border-radius: 3px;
  border-radius: var(--plyr-tooltip-radius,3px);
  bottom: 100%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
  box-shadow: var(--plyr-tooltip-shadow,0 1px 2px rgba(0,0,0,.15));
  color: #4a5464;
  color: var(--plyr-tooltip-color,#4a5464);
  font-size: 13px;
  font-size: var(--plyr-font-size-small,13px);
  font-weight: 400;
  font-weight: var(--plyr-font-weight-regular,400);
  left: 50%;
  line-height: 1.3;
  margin-bottom: 10px;
  margin-bottom: calc(var(--plyr-control-spacing, 10px)/2*2);
  opacity: 0;
  padding: 5px 7.5px;
  padding: calc(var(--plyr-control-spacing, 10px)/2) calc(var(--plyr-control-spacing, 10px)/2*1.5);
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, 10px) scale(.8);
  transform-origin: 50% 100%;
  transition: transform .2s ease .1s, opacity .2s ease .1s;
  white-space: nowrap;
  z-index: 2;
}
.plyr__tooltip:before {
  border-left: 4px solid transparent;
  border-left: var(--plyr-tooltip-arrow-size,4px) solid transparent;
  border-right: 4px solid transparent;
  border-right: var(--plyr-tooltip-arrow-size,4px) solid transparent;
  border-top: 4px solid hsla(0, 0%, 100%, .9);
  border-top: var(--plyr-tooltip-arrow-size,4px) solid var(--plyr-tooltip-background,hsla(0,0%,100%,.9));
  bottom: -4px;
  bottom: calc(var(--plyr-tooltip-arrow-size, 4px)*-1);
  content: "";
  height: 0;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 0;
  z-index: 2;
}
.plyr .plyr__control.plyr__tab-focus .plyr__tooltip,
.plyr .plyr__control:hover .plyr__tooltip,
.plyr__tooltip--visible {
  opacity: 1;
  transform: translate(-50%) scale(1);
}
.plyr .plyr__control:hover .plyr__tooltip {
  z-index: 3;
}
.plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip,
.plyr__controls > .plyr__control:first-child .plyr__tooltip {
  left: 0;
  transform: translateY(10px) scale(.8);
  transform-origin: 0 100%;
}
.plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip:before,
.plyr__controls > .plyr__control:first-child .plyr__tooltip:before {
  left: 16px;
  left: calc(var(--plyr-control-icon-size, 18px)/2 + var(--plyr-control-spacing, 10px)*0.7);
}
.plyr__controls > .plyr__control:last-child .plyr__tooltip {
  left: auto;
  right: 0;
  transform: translateY(10px) scale(.8);
  transform-origin: 100% 100%;
}
.plyr__controls > .plyr__control:last-child .plyr__tooltip:before {
  left: auto;
  right: 16px;
  right: calc(var(--plyr-control-icon-size, 18px)/2 + var(--plyr-control-spacing, 10px)*0.7);
  transform: translateX(50%);
}
.plyr__controls > .plyr__control:first-child + .plyr__control.plyr__tab-focus .plyr__tooltip,
.plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip--visible,
.plyr__controls > .plyr__control:first-child + .plyr__control:hover .plyr__tooltip,
.plyr__controls > .plyr__control:first-child.plyr__tab-focus .plyr__tooltip,
.plyr__controls > .plyr__control:first-child .plyr__tooltip--visible,
.plyr__controls > .plyr__control:first-child:hover .plyr__tooltip,
.plyr__controls > .plyr__control:last-child.plyr__tab-focus .plyr__tooltip,
.plyr__controls > .plyr__control:last-child .plyr__tooltip--visible,
.plyr__controls > .plyr__control:last-child:hover .plyr__tooltip {
  transform: translate(0) scale(1);
}
.plyr__progress {
  left: 6.5px;
  left: calc(var(--plyr-range-thumb-height, 13px)*0.5);
  margin-right: 13px;
  margin-right: var(--plyr-range-thumb-height,13px);
  position: relative;
}
.plyr__progress__buffer,
.plyr__progress input[type=range] {
  margin-left: -6.5px;
  margin-left: calc(var(--plyr-range-thumb-height, 13px)*-0.5);
  margin-right: -6.5px;
  margin-right: calc(var(--plyr-range-thumb-height, 13px)*-0.5);
  width: calc(100% + 13px);
  width: calc(100% + var(--plyr-range-thumb-height, 13px));
}
.plyr__progress input[type=range] {
  position: relative;
  z-index: 2;
}
.plyr__progress .plyr__tooltip {
  font-size: 13px;
  font-size: var(--plyr-font-size-time,var(--plyr-font-size-small,13px));
  left: 0;
}
.plyr__progress__buffer {
  -webkit-appearance: none;
  background: 0 0;
  border: 0;
  border-radius: 100px;
  height: 5px;
  height: var(--plyr-range-track-height,5px);
  left: 0;
  margin-top: -2.5px;
  margin-top: calc(var(--plyr-range-track-height, 5px)/2*-1);
  padding: 0;
  position: absolute;
  top: 50%;
}
.plyr__progress__buffer::-webkit-progress-bar {
  background: 0 0;
}
.plyr__progress__buffer::-webkit-progress-value {
  background: currentColor;
  border-radius: 100px;
  min-width: 5px;
  min-width: var(--plyr-range-track-height,5px);
  -webkit-transition: width .2s ease;
  transition: width .2s ease;
}
.plyr__progress__buffer::-moz-progress-bar {
  background: currentColor;
  border-radius: 100px;
  min-width: 5px;
  min-width: var(--plyr-range-track-height,5px);
  -moz-transition: width .2s ease;
  transition: width .2s ease;
}
.plyr__progress__buffer::-ms-fill {
  border-radius: 100px;
  -ms-transition: width .2s ease;
  transition: width .2s ease;
}
.plyr--loading .plyr__progress__buffer {
  animation: plyr-progress 1s linear infinite;
  background-image:
    linear-gradient(
      -45deg,
      rgba(35, 40, 47, .6) 25%,
      transparent 0,
      transparent 50%,
      rgba(35, 40, 47, .6) 0,
      rgba(35, 40, 47, .6) 75%,
      transparent 0,
      transparent);
  background-image:
    linear-gradient(
      -45deg,
      var(--plyr-progress-loading-background,rgba(35,40,47,.6)) 25%,
      transparent 0,
      transparent 50%,
      var(--plyr-progress-loading-background,rgba(35,40,47,.6)) 0,
      var(--plyr-progress-loading-background,rgba(35,40,47,.6)) 75%,
      transparent 0,
      transparent);
  background-repeat: repeat-x;
  background-size: 25px 25px;
  background-size: var(--plyr-progress-loading-size,25px) var(--plyr-progress-loading-size,25px);
  color: transparent;
}
.plyr--video.plyr--loading .plyr__progress__buffer {
  background-color: hsla(0, 0%, 100%, .25);
  background-color: var(--plyr-video-progress-buffered-background,hsla(0,0%,100%,.25));
}
.plyr--audio.plyr--loading .plyr__progress__buffer {
  background-color: rgba(193, 200, 209, .6);
  background-color: var(--plyr-audio-progress-buffered-background,rgba(193,200,209,.6));
}
.plyr__volume {
  align-items: center;
  display: flex;
  max-width: 110px;
  min-width: 80px;
  position: relative;
  width: 20%;
}
.plyr__volume input[type=range] {
  margin-left: 5px;
  margin-left: calc(var(--plyr-control-spacing, 10px)/2);
  margin-right: 5px;
  margin-right: calc(var(--plyr-control-spacing, 10px)/2);
  position: relative;
  z-index: 2;
}
.plyr--is-ios .plyr__volume {
  min-width: 0;
  width: auto;
}
.plyr--audio {
  display: block;
}
.plyr--audio .plyr__controls {
  background: #fff;
  background: var(--plyr-audio-controls-background,#fff);
  border-radius: inherit;
  color: #4a5464;
  color: var(--plyr-audio-control-color,#4a5464);
  padding: 10px;
  padding: var(--plyr-control-spacing,10px);
}
.plyr--audio .plyr__control.plyr__tab-focus,
.plyr--audio .plyr__control:hover,
.plyr--audio .plyr__control[aria-expanded=true] {
  background: #00b3ff;
  background: var(--plyr-audio-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b3ff)));
  color: #fff;
  color: var(--plyr-audio-control-color-hover,#fff);
}
.plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track {
  background-color: rgba(193, 200, 209, .6);
  background-color: var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,rgba(193,200,209,.6)));
}
.plyr--full-ui.plyr--audio input[type=range]::-moz-range-track {
  background-color: rgba(193, 200, 209, .6);
  background-color: var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,rgba(193,200,209,.6)));
}
.plyr--full-ui.plyr--audio input[type=range]::-ms-track {
  background-color: rgba(193, 200, 209, .6);
  background-color: var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,rgba(193,200,209,.6)));
}
.plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb {
  box-shadow:
    0 1px 1px rgba(35, 40, 47, .15),
    0 0 0 1px rgba(35, 40, 47, .2),
    0 0 0 3px rgba(35, 40, 47, .1);
  box-shadow: var(--plyr-range-thumb-shadow,0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,rgba(35,40,47,.1));
}
.plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb {
  box-shadow:
    0 1px 1px rgba(35, 40, 47, .15),
    0 0 0 1px rgba(35, 40, 47, .2),
    0 0 0 3px rgba(35, 40, 47, .1);
  box-shadow: var(--plyr-range-thumb-shadow,0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,rgba(35,40,47,.1));
}
.plyr--full-ui.plyr--audio input[type=range]:active::-ms-thumb {
  box-shadow:
    0 1px 1px rgba(35, 40, 47, .15),
    0 0 0 1px rgba(35, 40, 47, .2),
    0 0 0 3px rgba(35, 40, 47, .1);
  box-shadow: var(--plyr-range-thumb-shadow,0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,rgba(35,40,47,.1));
}
.plyr--audio .plyr__progress__buffer {
  color: rgba(193, 200, 209, .6);
  color: var(--plyr-audio-progress-buffered-background,rgba(193,200,209,.6));
}
.plyr--video {
  background: #000;
  overflow: hidden;
}
.plyr--video.plyr--menu-open {
  overflow: visible;
}
.plyr__video-wrapper {
  background: #000;
  height: 100%;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.plyr__video-embed,
.plyr__video-wrapper--fixed-ratio {
  height: 0;
  padding-bottom: 56.25%;
}
.plyr__video-embed iframe,
.plyr__video-wrapper--fixed-ratio video {
  border: 0;
  left: 0;
  position: absolute;
  top: 0;
}
.plyr--full-ui .plyr__video-embed > .plyr__video-embed__container {
  padding-bottom: 240%;
  position: relative;
  transform: translateY(-38.28125%);
}
.plyr--video .plyr__controls-inner {
  background: linear-gradient(transparent, rgba(0, 0, 0, .75));
  background: var(--plyr-video-controls-background,linear-gradient(transparent,rgba(0,0,0,.75)));
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  bottom: 0;
  color: #fff;
  color: var(--plyr-video-control-color,#fff);
  left: 0;
  padding: 5px;
  padding: calc(var(--plyr-control-spacing, 10px)/2);
  padding-top: 20px;
  padding-top: calc(var(--plyr-control-spacing, 10px)*2);
  position: absolute;
  right: 0;
  transition: opacity .4s ease-in-out, transform .4s ease-in-out;
  z-index: 3;
}
@media (min-width: 480px) {
  .plyr--video .plyr__controls-inner {
    padding: 10px;
    padding: var(--plyr-control-spacing,10px);
    padding-top: 35px;
    padding-top: calc(var(--plyr-control-spacing, 10px)*3.5);
  }
}
.plyr--video.plyr--hide-controls .plyr__controls-inner {
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
}
.plyr--video .plyr__control.plyr__tab-focus,
.plyr--video .plyr__control:hover,
.plyr--video .plyr__control[aria-expanded=true] {
  background: #00b3ff;
  background: var(--plyr-video-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b3ff)));
  color: #fff;
  color: var(--plyr-video-control-color-hover,#fff);
}
.plyr__control--overlaid {
  background: #00b3ff;
  background: var(--plyr-video-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b3ff)));
  border: 0;
  border-radius: 100%;
  color: #fff;
  color: var(--plyr-video-control-color,#fff);
  display: none;
  left: 50%;
  opacity: .9;
  padding: 15px;
  padding: calc(var(--plyr-control-spacing, 10px)*1.5);
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: .3s;
  z-index: 2;
}
.plyr__control--overlaid svg {
  left: 2px;
  position: relative;
}
.plyr__control--overlaid:focus,
.plyr__control--overlaid:hover {
  opacity: 1;
}
.plyr--playing .plyr__control--overlaid {
  opacity: 0;
  visibility: hidden;
}
.plyr--full-ui.plyr--video .plyr__control--overlaid {
  display: block;
}
.plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track {
  background-color: hsla(0, 0%, 100%, .25);
  background-color: var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,hsla(0,0%,100%,.25)));
}
.plyr--full-ui.plyr--video input[type=range]::-moz-range-track {
  background-color: hsla(0, 0%, 100%, .25);
  background-color: var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,hsla(0,0%,100%,.25)));
}
.plyr--full-ui.plyr--video input[type=range]::-ms-track {
  background-color: hsla(0, 0%, 100%, .25);
  background-color: var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,hsla(0,0%,100%,.25)));
}
.plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb {
  box-shadow:
    0 1px 1px rgba(35, 40, 47, .15),
    0 0 0 1px rgba(35, 40, 47, .2),
    0 0 0 3px hsla(0, 0%, 100%, .5);
  box-shadow: var(--plyr-range-thumb-shadow,0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,hsla(0,0%,100%,.5));
}
.plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb {
  box-shadow:
    0 1px 1px rgba(35, 40, 47, .15),
    0 0 0 1px rgba(35, 40, 47, .2),
    0 0 0 3px hsla(0, 0%, 100%, .5);
  box-shadow: var(--plyr-range-thumb-shadow,0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,hsla(0,0%,100%,.5));
}
.plyr--full-ui.plyr--video input[type=range]:active::-ms-thumb {
  box-shadow:
    0 1px 1px rgba(35, 40, 47, .15),
    0 0 0 1px rgba(35, 40, 47, .2),
    0 0 0 3px hsla(0, 0%, 100%, .5);
  box-shadow: var(--plyr-range-thumb-shadow,0 1px 1px rgba(35,40,47,.15),0 0 0 1px rgba(35,40,47,.2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,hsla(0,0%,100%,.5));
}
.plyr--video .plyr__progress__buffer {
  color: hsla(0, 0%, 100%, .25);
  color: var(--plyr-video-progress-buffered-background,hsla(0,0%,100%,.25));
}
.plyr:-webkit-full-screen {
  background: #000;
  border-radius: 0 !important;
  height: 100%;
  margin: 0;
  width: 100%;
}
.plyr:fullscreen {
  background: #000;
  border-radius: 0 !important;
  height: 100%;
  margin: 0;
  width: 100%;
}
.plyr:-webkit-full-screen video {
  height: 100%;
}
.plyr:fullscreen video {
  height: 100%;
}
.plyr:-webkit-full-screen .plyr__video-wrapper {
  height: 100%;
  position: static;
}
.plyr:fullscreen .plyr__video-wrapper {
  height: 100%;
  position: static;
}
.plyr:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper {
  height: 0;
  position: relative;
}
.plyr:fullscreen.plyr--vimeo .plyr__video-wrapper {
  height: 0;
  position: relative;
}
.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen {
  display: block;
}
.plyr:fullscreen .plyr__control .icon--exit-fullscreen {
  display: block;
}
.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen + svg {
  display: none;
}
.plyr:fullscreen .plyr__control .icon--exit-fullscreen + svg {
  display: none;
}
.plyr:-webkit-full-screen.plyr--hide-controls {
  cursor: none;
}
.plyr:fullscreen.plyr--hide-controls {
  cursor: none;
}
@media (min-width: 1024px) {
  .plyr:-webkit-full-screen .plyr__captions {
    font-size: 21px;
    font-size: var(--plyr-font-size-xlarge,21px);
  }
  .plyr:fullscreen .plyr__captions {
    font-size: 21px;
    font-size: var(--plyr-font-size-xlarge,21px);
  }
}
.plyr:-webkit-full-screen {
  background: #000;
  border-radius: 0 !important;
  height: 100%;
  margin: 0;
  width: 100%;
}
.plyr:-webkit-full-screen video {
  height: 100%;
}
.plyr:-webkit-full-screen .plyr__video-wrapper {
  height: 100%;
  position: static;
}
.plyr:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper {
  height: 0;
  position: relative;
}
.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen {
  display: block;
}
.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen + svg {
  display: none;
}
.plyr:-webkit-full-screen.plyr--hide-controls {
  cursor: none;
}
@media (min-width: 1024px) {
  .plyr:-webkit-full-screen .plyr__captions {
    font-size: 21px;
    font-size: var(--plyr-font-size-xlarge,21px);
  }
}
.plyr:-moz-full-screen {
  background: #000;
  border-radius: 0 !important;
  height: 100%;
  margin: 0;
  width: 100%;
}
.plyr:-moz-full-screen video {
  height: 100%;
}
.plyr:-moz-full-screen .plyr__video-wrapper {
  height: 100%;
  position: static;
}
.plyr:-moz-full-screen.plyr--vimeo .plyr__video-wrapper {
  height: 0;
  position: relative;
}
.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen {
  display: block;
}
.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen + svg {
  display: none;
}
.plyr:-moz-full-screen.plyr--hide-controls {
  cursor: none;
}
@media (min-width: 1024px) {
  .plyr:-moz-full-screen .plyr__captions {
    font-size: 21px;
    font-size: var(--plyr-font-size-xlarge,21px);
  }
}
.plyr:-ms-fullscreen {
  background: #000;
  border-radius: 0 !important;
  height: 100%;
  margin: 0;
  width: 100%;
}
.plyr:-ms-fullscreen video {
  height: 100%;
}
.plyr:-ms-fullscreen .plyr__video-wrapper {
  height: 100%;
  position: static;
}
.plyr:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper {
  height: 0;
  position: relative;
}
.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen {
  display: block;
}
.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen + svg {
  display: none;
}
.plyr:-ms-fullscreen.plyr--hide-controls {
  cursor: none;
}
@media (min-width: 1024px) {
  .plyr:-ms-fullscreen .plyr__captions {
    font-size: 21px;
    font-size: var(--plyr-font-size-xlarge,21px);
  }
}
.plyr--fullscreen-fallback {
  background: #000;
  border-radius: 0 !important;
  height: 100%;
  margin: 0;
  width: 100%;
  bottom: 0;
  display: block;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10000000;
}
.plyr--fullscreen-fallback video {
  height: 100%;
}
.plyr--fullscreen-fallback .plyr__video-wrapper {
  height: 100%;
  position: static;
}
.plyr--fullscreen-fallback.plyr--vimeo .plyr__video-wrapper {
  height: 0;
  position: relative;
}
.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen {
  display: block;
}
.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen + svg {
  display: none;
}
.plyr--fullscreen-fallback.plyr--hide-controls {
  cursor: none;
}
@media (min-width: 1024px) {
  .plyr--fullscreen-fallback .plyr__captions {
    font-size: 21px;
    font-size: var(--plyr-font-size-xlarge,21px);
  }
}
.plyr__ads {
  border-radius: inherit;
  bottom: 0;
  cursor: pointer;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}
.plyr__ads > div,
.plyr__ads > div iframe {
  height: 100%;
  position: absolute;
  width: 100%;
}
.plyr__ads:after {
  background: #23282f;
  border-radius: 2px;
  bottom: 10px;
  bottom: var(--plyr-control-spacing,10px);
  color: #fff;
  content: attr(data-badge-text);
  font-size: 11px;
  padding: 2px 6px;
  pointer-events: none;
  position: absolute;
  right: 10px;
  right: var(--plyr-control-spacing,10px);
  z-index: 3;
}
.plyr__ads:after:empty {
  display: none;
}
.plyr__cues {
  background: currentColor;
  display: block;
  height: 5px;
  height: var(--plyr-range-track-height,5px);
  left: 0;
  margin: -var(--plyr-range-track-height, 5px)/2 0 0;
  opacity: .8;
  position: absolute;
  top: 50%;
  width: 3px;
  z-index: 3;
}
.plyr__preview-thumb {
  background-color: hsla(0, 0%, 100%, .9);
  background-color: var(--plyr-tooltip-background,hsla(0,0%,100%,.9));
  border-radius: 3px;
  bottom: 100%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
  box-shadow: var(--plyr-tooltip-shadow,0 1px 2px rgba(0,0,0,.15));
  margin-bottom: 10px;
  margin-bottom: calc(var(--plyr-control-spacing, 10px)/2*2);
  opacity: 0;
  padding: 3px;
  padding: var(--plyr-tooltip-radius,3px);
  pointer-events: none;
  position: absolute;
  transform: translateY(10px) scale(.8);
  transform-origin: 50% 100%;
  transition: transform .2s ease .1s, opacity .2s ease .1s;
  z-index: 2;
}
.plyr__preview-thumb--is-shown {
  opacity: 1;
  transform: translate(0) scale(1);
}
.plyr__preview-thumb:before {
  border-left: 4px solid transparent;
  border-left: var(--plyr-tooltip-arrow-size,4px) solid transparent;
  border-right: 4px solid transparent;
  border-right: var(--plyr-tooltip-arrow-size,4px) solid transparent;
  border-top: 4px solid hsla(0, 0%, 100%, .9);
  border-top: var(--plyr-tooltip-arrow-size,4px) solid var(--plyr-tooltip-background,hsla(0,0%,100%,.9));
  bottom: -4px;
  bottom: calc(var(--plyr-tooltip-arrow-size, 4px)*-1);
  content: "";
  height: 0;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 0;
  z-index: 2;
}
.plyr__preview-thumb__image-container {
  background: #c1c8d1;
  border-radius: 2px;
  border-radius: calc(var(--plyr-tooltip-radius, 3px) - 1px);
  overflow: hidden;
  position: relative;
  z-index: 0;
}
.plyr__preview-thumb__image-container img {
  height: 100%;
  left: 0;
  max-height: none;
  max-width: none;
  position: absolute;
  top: 0;
  width: 100%;
}
.plyr__preview-thumb__time-container {
  bottom: 6px;
  left: 0;
  position: absolute;
  right: 0;
  white-space: nowrap;
  z-index: 3;
}
.plyr__preview-thumb__time-container span {
  background-color: rgba(0, 0, 0, .55);
  border-radius: 2px;
  border-radius: calc(var(--plyr-tooltip-radius, 3px) - 1px);
  color: #fff;
  font-size: 13px;
  font-size: var(--plyr-font-size-time,var(--plyr-font-size-small,13px));
  padding: 3px 6px;
}
.plyr__preview-scrubbing {
  bottom: 0;
  filter: blur(1px);
  height: 100%;
  left: 0;
  margin: auto;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity .3s ease;
  width: 100%;
  z-index: 1;
}
.plyr__preview-scrubbing--is-shown {
  opacity: 1;
}
.plyr__preview-scrubbing img {
  height: 100%;
  left: 0;
  max-height: none;
  max-width: none;
  object-fit: contain;
  position: absolute;
  top: 0;
  width: 100%;
}
.plyr--no-transition {
  transition: none !important;
}
.plyr__sr-only {
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  border: 0 !important;
  height: 1px !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
}
.plyr [hidden] {
  display: none !important;
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/components/background.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************/
.background:is(.s-background, .s-background *) {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  transition: background-color .9s cubic-bezier(.215, .61, .355, 1);
}
.background:is(.s-background, .s-background *),
.background[data-theme=dark]:is(.s-background, .s-background *) {
  background-color: var(--color-black);
}
.background[data-theme=primary]:is(.s-background, .s-background *) {
  background-color: var(--color-theme-med);
}
.background[data-theme=light]:is(.s-background, .s-background *) {
  background-color: var(--color-gray);
}
.background .perso-hero-bg:is(.s-background, .s-background *) {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  height: 200%;
  background: linear-gradient(var(--color-theme-dark), #000);
  transform: translateZ(0);
  opacity: 0;
  transition: opacity 1.1s cubic-bezier(.25, .46, .45, .94);
}
.background .perso-hero-bg.show:is(.s-background, .s-background *) {
  opacity: 1;
}
.background .plane:is(.s-background, .s-background *) {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: -1;
}
.background .plane:is(.s-background, .s-background *):after {
  content: "";
  display: block;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  background-color: var(--color-black);
}
.background .plane.hide:is(.s-background, .s-background *) {
  visibility: hidden;
}
.background .plane.fallback:is(.s-background, .s-background *) {
  opacity: 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%;
  mask-position: 50% 50%;
  -webkit-mask-size: 100vmin;
  mask-size: 100vmin;
}
.background .plane.fallback:is(.s-background, .s-background *):after {
  visibility: hidden;
}
.background .plane.fallback.normal:is(.s-background, .s-background *) {
  -webkit-mask:
    linear-gradient(
      180deg,
      #000 70%,
      transparent);
  mask:
    linear-gradient(
      180deg,
      #000 70%,
      transparent);
}
.background .plane.fallback.epoque-push:is(.s-background, .s-background *) {
  -webkit-mask: url(/img/masks.svg#mask1);
  mask: url(/img/masks.svg#mask1);
}
.background .plane.fallback > img:is(.s-background, .s-background *) {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  filter: Grayscale(1);
  opacity: 0;
}
.background .plane.fallback > img:is(.s-background, .s-background *):first-child {
  opacity: .2;
}
.background:is(.s-background, .s-background *) canvas {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

/*!******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/components/header.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************/
.header {
  --height:70px;
  --ease:ease;
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  padding: 20px;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: color .9s cubic-bezier(.215, .61, .355, 1);
}
:root {
  --header-height:90px;
}
@media only screen and (max-width: 900px) {
  :root {
    --header-height:64px;
  }
}
.header.display {
  visibility: inherit;
  opacity: 1;
}
.nav-opened .header {
  width: calc(100% - 12px);
}
.header--light {
  color: var(--color-white);
}
.header--dark {
  color: var(--color-text);
}
.header__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--height);
  box-sizing: content-box;
  position: relative;
  z-index: 5;
  transition: transform .4s var(--ease);
}
@media only screen and (max-width: 900px) {
  .header__container {
    align-items: flex-start;
    transition: opacity .9s cubic-bezier(.215, .61, .355, 1), visibility .9s cubic-bezier(.215, .61, .355, 1);
  }
}
.header__background {
  z-index: 2;
  position: absolute;
  width: 100%;
  height: var(--height);
  transition: transform .4s var(--ease);
}
.header__logo {
  display: block;
  transition: transform .9s cubic-bezier(.215, .61, .355, 1), opacity .9s cubic-bezier(.215, .61, .355, 1);
  transform: scale(1);
  color: unset;
  pointer-events: auto;
}
.desktop .header__logo:focus,
.desktop .header__logo:hover {
  opacity: .4;
}
.header--mini .header__logo {
  transform: translate3d(-20px, 0, 0);
}
.header--mini .header__logo.logo--en {
  transform: translate3d(-32px, 0, 0);
}
@media only screen and (max-width: 900px) {
  .header--mini .header__logo {
    transform: none !important;
  }
}
.header__btn {
  background: unset;
  color: unset;
  pointer-events: auto;
  display: none;
  position: relative;
}
.header__btn svg:not(:first-child) {
  position: absolute;
  top: 0;
  left: 0;
}
@media only screen and (max-width: 900px) {
  .header__btn {
    display: inline;
    display: initial;
  }
}
.header--open {
  color: var(--color-white);
}

/*!****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/components/logo.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************/
/* Visit Vietri logo (header) */
.logo:is(.s-logo, .s-logo *) {
  position: relative;
}
.logo > a:is(.s-logo, .s-logo *) {
  display: flex;
  align-items: center;
  color: unset;
}
.logo--full:is(.s-logo, .s-logo *) {
  height: 64px;
}
.logo__svg:is(.s-logo, .s-logo *) {
  display: block;
  height: 100%;
  width: auto;
  aspect-ratio: 344/136;
  overflow: visible;
}
@media only screen and (max-width: 900px) {
  .logo--full:is(.s-logo, .s-logo *) {
    height: 44px;
  }
}
/* reveal */
.logo path:is(.s-logo, .s-logo *) {
  transition: .7s cubic-bezier(.445, .05, .55, .95);
  transition-property: opacity, filter, transform;
  transform-box: fill-box;
  transform-origin: center;
}
.logo path:is(.s-logo, .s-logo *):not(.display) {
  opacity: 0;
  filter: blur(2.5px);
}
.logo__picto path:is(.s-logo, .s-logo *):not(.display) {
  transform: scale(.6);
}
.logo__word path:is(.s-logo, .s-logo *) {
  fill: currentColor;
}
/* reduced (mini header): pictogram only */
.logo__picto:is(.s-logo, .s-logo *) {
  transition: transform .9s cubic-bezier(.215, .61, .355, 1);
  transform-origin: 0 50%;
}
.logo__word:is(.s-logo, .s-logo *) {
  transition: opacity .5s cubic-bezier(.215, .61, .355, 1), transform .9s cubic-bezier(.215, .61, .355, 1);
}
.logo.reduced .logo__word:is(.s-logo, .s-logo *) {
  opacity: 0;
  transform: translateX(-12px);
  pointer-events: none;
}
.logo.reduced .logo__picto:is(.s-logo, .s-logo *) {
  transform: scale(.85);
}
.logo__row--3:is(.s-logo, .s-logo *) {
  transition: transform .9s cubic-bezier(.215, .61, .355, 1);
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/components/diag-line.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************/
svg:is(.s-diag-line, .s-diag-line *) {
  opacity: .4;
  stroke: currentColor;
  pointer-events: none;
  width: 100%;
  height: 100%;
  display: block;
}
svg:is(.s-diag-line, .s-diag-line *):not(.visible) {
  opacity: 0 !important;
  visibility: hidden !important;
}
@media only screen and (max-width: 900px) {
  svg.svg-date:is(.s-diag-line, .s-diag-line *) {
    width: 67.88px;
    height: 67.88px;
  }
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/components/icons-menu.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************/
@keyframes burger-out {
  0% {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 24;
  }
}
@keyframes burger-in {
  0% {
    stroke-dashoffset: 24;
  }
  to {
    stroke-dashoffset: 48;
  }
}
svg:is(.s-icon-burger, .s-icon-burger *) {
  stroke: currentColor;
  --delay:0s;
}
svg path:is(.s-icon-burger, .s-icon-burger *) {
  stroke-dasharray: 24;
  animation: burger-out .6s cubic-bezier(.25, .46, .45, .94) 1 both;
}
svg path:is(.s-icon-burger, .s-icon-burger *):first-child {
  animation-delay: calc(.1s + var(--delay));
}
svg path:is(.s-icon-burger, .s-icon-burger *):nth-child(2) {
  animation-delay: calc(.2s + var(--delay));
}
svg path:is(.s-icon-burger, .s-icon-burger *):nth-child(3) {
  animation-delay: calc(.3s + var(--delay));
}
svg.display:is(.s-icon-burger, .s-icon-burger *) {
  --delay:0.4s;
}
svg.display path:is(.s-icon-burger, .s-icon-burger *) {
  animation-name: burger-in;
}
svg:is(.s-icon-close, .s-icon-close *) {
  stroke: currentColor;
  --delay:0s;
  --length:27.5772;
  transform: translateZ(0);
}
svg path:is(.s-icon-close, .s-icon-close *) {
  stroke-dasharray: var(--length);
  stroke-dashoffset: var(--length);
  transition: stroke-dashoffset .9s cubic-bezier(.215, .61, .355, 1);
}
svg path:is(.s-icon-close, .s-icon-close *):first-child {
  transition-delay: calc(.2s + var(--delay));
}
svg path:is(.s-icon-close, .s-icon-close *):nth-child(2) {
  transition-delay: calc(.4s + var(--delay));
}
svg.display:is(.s-icon-close, .s-icon-close *) {
  --delay:var(--display-delay);
}
svg.display path:is(.s-icon-close, .s-icon-close *) {
  stroke-dashoffset: calc(var(--length)*2);
}

/*!****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/components/menu.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************/
.menu:is(.s-menu, .s-menu *) {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
}
@media only screen and (max-width: 900px) {
  .menu:is(.s-menu, .s-menu *) {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: var(--app-height);
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-direction: column;
    background: var(--color-black);
    padding: 0 20px;
    grid-gap: unset;
    color: var(--color-white);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
  }
  .menu--open:is(.s-menu, .s-menu *) {
    visibility: inherit;
    opacity: 1;
    pointer-events: auto;
  }
  .menu:is(.s-menu, .s-menu *):after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 110px;
    background-color: var(--color-black);
    z-index: 1;
  }
}
.menu__container:is(.s-menu, .s-menu *) {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  grid-gap: var(--s);
  align-items: center;
  justify-content: center;
  transform: translateY(90%);
  transition:
    opacity .9s cubic-bezier(.215, .61, .355, 1),
    visibility .9s cubic-bezier(.215, .61, .355, 1),
    transform .9s cubic-bezier(.215, .61, .355, 1);
}
@media only screen and (max-width: 900px) {
  .menu__container:is(.s-menu, .s-menu *) {
    padding-top: 110px;
    display: block;
    transition: none;
    transform: none;
    margin-bottom: auto;
    opacity: inherit !important;
    visibility: inherit !important;
  }
}
@media only screen and (max-width: 900px) {
  .menu__bottom:is(.s-menu, .s-menu *) {
    display: flex;
    justify-content: space-between;
    margin: var(--s) 0;
  }
}
.menu--mini .menu__container:is(.s-menu, .s-menu *) {
  transform: none;
}
.menu a:is(.s-menu, .s-menu *) {
  color: unset;
}
.menu-item:is(.s-menu, .s-menu *) {
  display: inline-flex;
  align-items: center;
  position: relative;
  pointer-events: auto;
}
@media only screen and (max-width: 900px) {
  .menu-item:is(.s-menu, .s-menu *) {
    display: block;
  }
}
@media only screen and (max-width: 900px) {
  .menu-item--page .menu-item__inner:is(.s-menu, .s-menu *) {
    height: 72px;
  }
  .menu-item--page:is(.s-menu, .s-menu *):nth-last-child(n+2):before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    border-bottom: 1px solid;
    opacity: .2;
  }
}
@media only screen and (max-width: 900px) {
  .menu-item--lang:is(.s-menu, .s-menu *) {
    position: absolute;
    bottom: 25px;
    right: 20px;
  }
}
.menu-item__inner:is(.s-menu, .s-menu *) {
  background: unset;
  color: unset;
  display: inline-flex;
  position: relative;
  align-items: center;
  transition: opacity .9s cubic-bezier(.215, .61, .355, 1);
}
@media only screen and (max-width: 900px) {
  .menu-item__inner:is(.s-menu, .s-menu *) {
    width: 100%;
  }
}
.menu-item__label:is(.s-menu, .s-menu *) {
  display: inline-flex;
  align-items: center;
  position: relative;
  height: 24px;
}
.menu-item__label:is(.s-menu, .s-menu *):before,
.menu-item__label > *:is(.s-menu, .s-menu *) {
  transition: .9s cubic-bezier(.215, .61, .355, 1);
  transition-property: opacity, transform;
}
.menu-item__label:is(.s-menu, .s-menu *):before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: 0 100%;
}
@media only screen and (max-width: 900px) {
  .menu-item__label:is(.s-menu, .s-menu *) {
    position: static;
  }
}
.menu-item.nuxt-link-active .menu-item__label:is(.s-menu, .s-menu *):before {
  transform: scaleX(1);
}
.desktop .menu-item:focus .menu-item__inner:is(.s-menu, .s-menu *),
.desktop .menu-item:hover .menu-item__inner:is(.s-menu, .s-menu *) {
  opacity: .4;
}
.menu-item__icon:is(.s-menu, .s-menu *):not(:first-child) {
  position: absolute;
}
.menu-item--has-subnav:is(.s-menu, .s-menu *) {
  color: unset;
  background: none;
}
.menu-item--has-subnav .menu-item__inner:is(.s-menu, .s-menu *) {
  overflow: hidden;
}
.menu-item--has-subnav:is(.s-menu, .s-menu *) svg path {
  stroke: currentColor;
}
.menu-item--has-subnav svg:is(.s-menu, .s-menu *) {
  margin-right: 8px;
}
.menu-item--has-subnav .close:is(.s-menu, .s-menu *) {
  position: absolute;
  transform: translate3d(0, 110%, 0);
}
@media only screen and (max-width: 900px) {
  .menu-item--has-subnav .close:is(.s-menu, .s-menu *) {
    display: none;
  }
}
.menu-item--has-subnav.parcours-open .menu-item__label .close:is(.s-menu, .s-menu *) {
  transform: translateZ(0);
  transition-delay:
    0s,
    0s,
    0s;
}
.menu-item--has-subnav.parcours-open .menu-item__label span:is(.s-menu, .s-menu *):not(.close) {
  transform: translate3d(0, -110%, 0);
  transition-delay:
    0s,
    0s,
    .9s;
}
@media only screen and (max-width: 900px) {
  .menu-item--has-subnav.parcours-open .menu-item__label span:is(.s-menu, .s-menu *):not(.close) {
    transform: none;
  }
}
@media only screen and (max-width: 900px) {
  .menu-item--has-subnav.parcours-open .menu-item__nav-mobile:is(.s-menu, .s-menu *) {
    height: var(--height);
  }
  .menu-item--has-subnav.parcours-open .menu-item__icon:is(.s-menu, .s-menu *),
  .menu-item--has-subnav.parcours-open .menu-item__label:is(.s-menu, .s-menu *) {
    opacity: .4;
  }
  .menu-item--has-subnav.parcours-open .menu-item__arrow:is(.s-menu, .s-menu *) {
    transform: rotate(-270deg);
  }
}
@media only screen and (max-width: 900px) {
  .menu-item--has-subnav:is(.s-menu, .s-menu *) {
    display: block;
  }
}
.menu-item__arrow:is(.s-menu, .s-menu *) {
  display: none;
  margin-left: auto;
  transform: rotate(-90deg);
  transition: transform .9s cubic-bezier(.215, .61, .355, 1);
}
@media only screen and (max-width: 900px) {
  .menu-item__arrow:is(.s-menu, .s-menu *) {
    display: inline;
    display: initial;
  }
}
.menu-item__nav-mobile:is(.s-menu, .s-menu *) {
  display: none;
}
@media only screen and (max-width: 900px) {
  .menu-item__nav-mobile:is(.s-menu, .s-menu *) {
    display: block;
    width: 100%;
    text-align: left;
    height: 0;
    overflow: hidden;
    transition: height .9s cubic-bezier(.215, .61, .355, 1);
  }
  .menu-item__nav-mobile li:is(.s-menu, .s-menu *):not(:last-child) {
    margin-bottom: 16px;
  }
  .menu-item__nav-mobile li:is(.s-menu, .s-menu *):last-child {
    margin-bottom: 24px;
  }
}
.menu .current-epoque:is(.s-menu, .s-menu *) {
  position: fixed;
  top: 50%;
  transform-origin: 0 0;
  transform: rotate(-90deg) translate3d(-50%, 50%, 0);
  width: 50vh;
  height: 16px;
  pointer-events: none;
  text-align: center;
  opacity: .3;
}
@media only screen and (max-width: 900px) {
  .menu .current-epoque:is(.s-menu, .s-menu *) {
    display: none;
  }
}
.menu .sound-toggle:is(.s-menu, .s-menu *) {
  position: fixed;
  z-index: 10;
  bottom: 24px;
  left: 24px;
  pointer-events: auto;
}
@media only screen and (max-width: 900px) {
  .menu .sound-toggle:is(.s-menu, .s-menu *) {
    position: static;
  }
}
/* Visit Vietri: section pictograms (Cultura / Natura / Intrattenimento) */
.menu-item__picto:is(.s-menu, .s-menu *) {
  display: inline-block;
  width: 1.6em;
  height: auto;
  margin-right: .6em;
  vertical-align: -0.45em;
  transition: transform .9s cubic-bezier(.215, .61, .355, 1);
}
.desktop .menu-item:hover .menu-item__picto:is(.s-menu, .s-menu *) {
  transform: rotate(90deg);
}
@media only screen and (max-width: 900px) {
  .menu-item__picto:is(.s-menu, .s-menu *) {
    width: 1.4em;
  }
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/components/icons-nav.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************/
svg:is(.s-icon-parcours, .s-icon-parcours *) {
  --delay:0s;
  overflow: visible;
}
svg path:is(.s-icon-parcours, .s-icon-parcours *) {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: .9s cubic-bezier(.215, .61, .355, 1);
  transition-property: stroke-dashoffset, transform;
  transform-origin: 50%;
  transform: rotate(25deg);
  transform-box: fill-box;
}
svg path:is(.s-icon-parcours, .s-icon-parcours *):nth-child(odd) {
  transform-origin: 50% 8px;
}
svg path:is(.s-icon-parcours, .s-icon-parcours *):first-child {
  transition-delay: calc(.1s + var(--delay)), .06s;
}
svg path:is(.s-icon-parcours, .s-icon-parcours *):nth-child(2) {
  transition-delay: calc(.2s + var(--delay)), .12s;
}
svg path:is(.s-icon-parcours, .s-icon-parcours *):nth-child(3) {
  transition-delay: calc(.3s + var(--delay)), .18s;
}
svg path:is(.s-icon-parcours, .s-icon-parcours *):nth-child(4) {
  transition-delay: calc(.4s + var(--delay)), .24s;
}
svg.hover path:is(.s-icon-parcours, .s-icon-parcours *) {
  transform: rotate(0);
}
svg.display:is(.s-icon-parcours, .s-icon-parcours *) {
  --delay:0.4s;
}
svg.display path:is(.s-icon-parcours, .s-icon-parcours *) {
  stroke-dashoffset: 40;
}
svg:is(.s-icon-nav-arrow, .s-icon-nav-arrow *) {
  stroke: currentColor;
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/components/current-epoque.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************/
@keyframes switch {
  0% {
    transform: translate3d(0, var(--switch-start), 0);
  }
  to {
    transform: translate3d(0, var(--switch-end), 0);
  }
}
.current-epoque:is(.s-current-epoque, .s-current-epoque *) {
  position: relative;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.current-epoque.animate > span:is(.s-current-epoque, .s-current-epoque *) {
  animation-name: switch;
}
.current-epoque > span:is(.s-current-epoque, .s-current-epoque *) {
  animation: 1.1s cubic-bezier(.25, .46, .45, .94) 1 backwards;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  text-align: center;
  white-space: nowrap;
}
.current-epoque .next:is(.s-current-epoque, .s-current-epoque *) {
  --switch-start:110%;
  --switch-end:0%;
}
.current-epoque .curr:is(.s-current-epoque, .s-current-epoque *),
.current-epoque .next:is(.s-current-epoque, .s-current-epoque *) {
  transform: translate3d(0, var(--switch-start), 0);
}
.current-epoque .curr:is(.s-current-epoque, .s-current-epoque *) {
  --switch-start:0%;
  --switch-end:-110%;
}

/*!************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/components/sound-toggle.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************/
button:is(.s-sound-toggle, .s-sound-toggle *) {
  background: unset;
  color: unset;
  font: unset;
  display: block;
  transition: opacity .9s cubic-bezier(.215, .61, .355, 1);
}
.desktop button:is(.s-sound-toggle, .s-sound-toggle *):focus,
.desktop button:is(.s-sound-toggle, .s-sound-toggle *):hover {
  opacity: .4;
}
button svg:is(.s-sound-toggle, .s-sound-toggle *) {
  display: inherit;
}
svg:is(.s-icon-sound, .s-icon-sound *) {
  stroke: currentColor;
}

/*!********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/components/timeline.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************/
.timeline:is(.s-timeline, .s-timeline *) {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  display: flex;
  justify-content: flex-end;
  --in-delay:1.1s;
}
.timeline__container:is(.s-timeline, .s-timeline *) {
  position: relative;
}
@media only screen and (max-width: 900px) {
  .timeline:is(.s-timeline, .s-timeline *) {
    top: unset;
    height: auto;
    right: 0;
    bottom: 0;
    width: 100%;
    display: unset;
    z-index: 1;
  }
}
.timeline__scroll:is(.s-timeline, .s-timeline *) {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 0;
  display: block;
}
.timeline__scroll .scroll-indicator:is(.s-timeline, .s-timeline *) {
  --delay:$tTime + 0.2s;
}
.timeline__nav:is(.s-timeline, .s-timeline *) {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 30px;
  height: 100%;
  --in-delay:0.2s;
}
.timeline__nav.display:is(.s-timeline, .s-timeline *) {
  pointer-events: auto !important;
}
@media only screen and (max-width: 900px) {
  .timeline__nav:is(.s-timeline, .s-timeline *) {
    flex-direction: row;
    justify-content: center;
    padding: 10px 20px;
    border-top: 1px solid;
    transition: background-color .9s cubic-bezier(.215, .61, .355, 1);
    transition-delay: 0s !important;
  }
  [data-theme=light] .timeline__nav:is(.s-timeline, .s-timeline *) {
    background-color: var(--color-gray);
    border-color: var(--color-black);
  }
  [data-theme=dark] .timeline__nav:is(.s-timeline, .s-timeline *) {
    background-color: var(--color-black);
    border-color: var(--color-white);
  }
  [data-theme=primary] .timeline__nav:is(.s-timeline, .s-timeline *) {
    background-color: var(--color-theme-med);
    border-color: var(--color-white);
  }
}
.timeline .timeline__epoque:is(.s-timeline, .s-timeline *) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: flex-grow .9s cubic-bezier(.215, .61, .355, 1);
  flex-grow: .00001;
  position: relative;
}
.timeline .timeline__epoque-btn > span:is(.s-timeline, .s-timeline *):first-child {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.timeline .timeline__epoque.active:is(.s-timeline, .s-timeline *) {
  flex-grow: 1;
}
.timeline .timeline__epoque.active .timeline__character:is(.s-timeline, .s-timeline *) {
  visibility: inherit;
  opacity: 1;
}
.timeline__line:is(.s-timeline, .s-timeline *) {
  --progress:0;
  position: relative;
  top: -10px;
  width: 100%;
  flex-grow: 1;
}
.timeline__line:is(.s-timeline, .s-timeline *):after,
.timeline__line:is(.s-timeline, .s-timeline *):before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 1px;
  background-color: currentColor;
}
.timeline__line:is(.s-timeline, .s-timeline *):before {
  opacity: .2;
}
.timeline__line:is(.s-timeline, .s-timeline *):after {
  transform-origin: 50% 0;
  transform: scaleY(var(--progress));
}
@media only screen and (max-width: 900px) {
  .timeline__line:is(.s-timeline, .s-timeline *) {
    top: -16px;
    width: calc(100% - 36px);
    left: 32px;
    height: 100%;
  }
  .timeline__line:is(.s-timeline, .s-timeline *):not(:last-of-type) {
    margin-right: 12px;
  }
  .timeline__line:is(.s-timeline, .s-timeline *):after,
  .timeline__line:is(.s-timeline, .s-timeline *):before {
    width: 100%;
    height: 1px;
    margin: auto 0;
  }
  .timeline__line:is(.s-timeline, .s-timeline *):after {
    transform-origin: 0 50%;
    transform: scaleX(var(--progress));
  }
}
.timeline .timeline__character:is(.s-timeline, .s-timeline *) {
  position: absolute;
  left: 50%;
  z-index: 1;
  top: calc(var(--pos)*100%);
  transform: translate3d(-50%, -50%, 0);
  background: unset;
  color: unset;
  visibility: hidden;
  opacity: 0;
}
.timeline .timeline__character:is(.s-timeline, .s-timeline *):before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 5px;
  height: 5px;
  background-color: currentColor;
  box-sizing: border-box;
  border-radius: 50%;
}
.timeline .timeline__character-icon:is(.s-timeline, .s-timeline *) {
  display: block;
  padding: 15% 0 0;
  box-sizing: border-box;
  background-color: var(--color-black);
  border-radius: 50%;
  overflow: hidden;
  height: 100%;
  opacity: 0;
  transition: opacity .6s ease;
}
.timeline .timeline__character-icon > img:is(.s-timeline, .s-timeline *) {
  display: block;
  width: 100%;
  height: auto;
}
.desktop .timeline .timeline__character:focus .timeline__character-icon:is(.s-timeline, .s-timeline *),
.desktop .timeline .timeline__character:hover .timeline__character-icon:is(.s-timeline, .s-timeline *),
.timeline .timeline__character.active .timeline__character-icon:is(.s-timeline, .s-timeline *) {
  opacity: 1;
}
@media only screen and (max-width: 900px) {
  .timeline .timeline__character:is(.s-timeline, .s-timeline *) {
    top: unset;
    left: calc(var(--pos)*100%);
  }
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/components/scroll-indicator.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************/
.scroll-indicator:is(.s-scroll-indicator, .s-scroll-indicator *) {
  pointer-events: none;
  --delay:0s;
  --y-offset:0px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-transform: uppercase;
}
.scroll-indicator__label:is(.s-scroll-indicator, .s-scroll-indicator *) {
  display: flex;
  align-items: center;
  white-space: nowrap;
  aspect-ratio: 1/1;
  transform: translateY(calc(var(--y-offset)*-0.75)) rotate(-90deg);
}
@media only screen and (max-width: 900px) {
  .scroll-indicator__label:is(.s-scroll-indicator, .s-scroll-indicator *) {
    aspect-ratio: unset;
    transform: none;
  }
}
.scroll-indicator__line:is(.s-scroll-indicator, .s-scroll-indicator *) {
  width: 1px;
  height: var(--length);
  flex-shrink: 0;
  position: relative;
  text-align: right;
  margin-top: 20px;
  transform-origin: 50% 0;
  transform: translateY(calc(var(--y-offset)*-1));
}
.scroll-indicator__line:is(.s-scroll-indicator, .s-scroll-indicator *):before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 1px;
  height: 200%;
  background-color: currentColor;
  transform-origin: 50% 0;
  transition: transform 1.1s cubic-bezier(.215, .61, .355, 1);
}
.scroll-indicator.compress:is(.s-scroll-indicator, .s-scroll-indicator *) {
  transition: transform .9s cubic-bezier(.215, .61, .355, 1);
}
.scroll-indicator.compress .scroll-indicator__line:is(.s-scroll-indicator, .s-scroll-indicator *):before {
  transform: scaleY(0);
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/components/timeline-button.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************/
.tl-btn:is(.s-tl-btn, .s-tl-btn *) {
  width: var(--s);
  height: var(--s);
  position: relative;
  text-align: center;
  color: unset;
  --circ:150.79645;
}
.tl-btn svg:is(.s-tl-btn, .s-tl-btn *) {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  stroke: currentColor;
  transform: rotate(-90deg);
  stroke-dasharray: var(--circ);
  stroke-dashoffset: var(--circ);
  transition: stroke-dashoffset .5s cubic-bezier(.25, .46, .45, .94);
}
.tl-btn .tl-btn__tag:is(.s-tl-btn, .s-tl-btn *) {
  position: absolute;
  right: calc(100% - 8px);
  top: 0;
  color: inherit;
  background: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity .9s cubic-bezier(.215, .61, .355, 1);
}
@media only screen and (max-width: 900px) {
  .tl-btn .tl-btn__tag:is(.s-tl-btn, .s-tl-btn *) {
    display: none;
  }
}
.desktop .tl-btn:focus .tl-btn__tag:is(.s-tl-btn, .s-tl-btn *),
.desktop .tl-btn:hover .tl-btn__tag:is(.s-tl-btn, .s-tl-btn *) {
  opacity: 1;
}
.desktop .tl-btn:focus svg:is(.s-tl-btn, .s-tl-btn *),
.desktop .tl-btn:hover svg:is(.s-tl-btn, .s-tl-btn *),
.tl-btn.active svg:is(.s-tl-btn, .s-tl-btn *) {
  stroke-dashoffset: 0;
}
@media only screen and (max-width: 900px) {
  .tl-btn:is(.s-tl-btn, .s-tl-btn *) {
    width: 32px;
    height: 32px;
    --circ:100.53096;
  }
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/components/tooltip.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************/
.tooltip:is(.s-tooltip, .s-tooltip *) {
  color: var(--color-white);
  position: relative;
  width: max-content;
  padding: 16px;
}
.tooltip .text:is(.s-tooltip, .s-tooltip *) {
  flex-basis: 100%;
  font-style: italic;
  opacity: .5;
  margin-top: 8px;
}
.tooltip img:is(.s-tooltip, .s-tooltip *) {
  margin: 0 8px;
}

/*!********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/components/parcours.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************/
.parcours:is(.s-parcours, .s-parcours *) {
  --line-rotation:-10deg;
  --hover-offset-left:0px;
  --hover-offset-right:0px;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  position: fixed;
  color: var(--color-white);
  z-index: 2;
}
@media only screen and (max-width: 900px) {
  .parcours:is(.s-parcours, .s-parcours *) {
    display: none;
  }
}
.parcours.display:is(.s-parcours, .s-parcours *) {
  pointer-events: auto;
}
.parcours__content:is(.s-parcours, .s-parcours *) {
  display: flex;
  flex-wrap: nowrap;
  padding: 0 80px;
  height: 100%;
}
.parcours__content > *:is(.s-parcours, .s-parcours *) {
  flex-shrink: 0;
  transition: transform .9s cubic-bezier(.215, .61, .355, 1);
}
.parcours--selected .parcours__epoque:is(.s-parcours, .s-parcours *):not(.active) {
  filter: blur(4px);
  opacity: .4;
}
.parcours--selected .parcours__epoque.active .parcours__subtitle:is(.s-parcours, .s-parcours *) {
  opacity: 1;
}
.parcours .offset--left:is(.s-parcours, .s-parcours *) {
  transform: translate3d(var(--hover-offset-left), 0, 0);
}
.parcours .offset--right:is(.s-parcours, .s-parcours *) {
  transform: translate3d(var(--hover-offset-right), 0, 0);
}
.parcours .parcours__separator.offset--left:is(.s-parcours, .s-parcours *) {
  transform: translate3d(var(--hover-offset-left), 0, 0) rotate(-10deg);
}
.parcours .parcours__separator.offset--right:is(.s-parcours, .s-parcours *) {
  transform: translate3d(var(--hover-offset-right), 0, 0) rotate(-10deg);
}
.parcours__epoque:is(.s-parcours, .s-parcours *) {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-direction: column;
  text-align: center;
  position: relative;
  transition: .9s cubic-bezier(.215, .61, .355, 1);
  transition-property:
    transform,
    opacity,
    filter;
}
.parcours__epoque.active .parcours__title:is(.s-parcours, .s-parcours *) {
  z-index: 1;
  color: var(--color-theme-normal);
}
.parcours__epoque.active .parcours__hover:is(.s-parcours, .s-parcours *) {
  cursor: unset;
  z-index: 0;
  width: calc(50vw + 32px);
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%);
}
.parcours__hover:is(.s-parcours, .s-parcours *) {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
  cursor: pointer;
}
.desktop .parcours__hover:focus + .parcours__heading .parcours__title:is(.s-parcours, .s-parcours *),
.desktop .parcours__hover:hover + .parcours__heading .parcours__title:is(.s-parcours, .s-parcours *) {
  color: var(--color-theme-normal);
}
.parcours__heading:is(.s-parcours, .s-parcours *) {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-direction: column;
  filter: blur(4px);
  opacity: 0;
  transition: 1.5s cubic-bezier(.25, .46, .45, .94);
  transition-property: opacity, filter;
}
.parcours__heading.display:is(.s-parcours, .s-parcours *) {
  filter: none;
  opacity: 1;
}
.parcours__title:is(.s-parcours, .s-parcours *) {
  color: unset;
  transition: color .9s cubic-bezier(.215, .61, .355, 1);
}
.parcours__subtitle:is(.s-parcours, .s-parcours *) {
  margin-top: 20px;
  opacity: 0;
  transition: opacity .9s cubic-bezier(.215, .61, .355, 1);
}
.parcours__date:is(.s-parcours, .s-parcours *) {
  margin-bottom: var(--xs);
}
.parcours__separator:is(.s-parcours, .s-parcours *) {
  stroke: currentColor;
  width: auto;
  height: 100%;
  display: block;
  opacity: .5;
}
.parcours__separator:is(.s-parcours, .s-parcours *) svg {
  width: auto;
  height: 100%;
  transform: rotate(var(--line-rotation));
}
.parcours__link:is(.s-parcours, .s-parcours *) {
  position: absolute;
  bottom: var(--m);
  left: 50%;
  transform: translateX(-50%);
}
.parcours__persos:is(.s-parcours, .s-parcours *) {
  visibility: hidden;
  opacity: 0;
  height: 0;
  transition: .9s cubic-bezier(.645, .045, .355, 1);
  transition-timing-function:
    cubic-bezier(.645, .045, .355, 1),
    cubic-bezier(.215, .61, .355, 1),
    cubic-bezier(.215, .61, .355, 1);
  transition-property:
    height,
    opacity,
    visibility;
  transition-delay:
    .1s,
    0s,
    .9s;
}
.parcours__persos.display:is(.s-parcours, .s-parcours *) {
  height: var(--height);
  opacity: 1;
  visibility: inherit;
  transition-delay:
    0s,
    .45s,
    .45s;
}
.parcours__perso:is(.s-parcours, .s-parcours *) {
  margin-top: var(--xs);
}
.parcours__perso:is(.s-parcours, .s-parcours *):not(:last-of-type) {
  margin-right: var(--xs);
}
.parcours__perso-names:is(.s-parcours, .s-parcours *) {
  position: relative;
}
.parcours__perso-names:is(.s-parcours, .s-parcours *) span:not(.placeholder) {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/components/portrait-button.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************/
.portrait-btn:is(.s-portrait-btn, .s-portrait-btn *) {
  --halo-size:144px;
  display: inline-block;
  position: relative;
  z-index: 1;
}
.portrait-btn--small:is(.s-portrait-btn, .s-portrait-btn *) {
  --halo-size:96px;
}
.portrait-btn__link:is(.s-portrait-btn, .s-portrait-btn *) {
  display: table;
  color: unset;
}
.desktop .portrait-btn__link:focus .portrait-btn__img:is(.s-portrait-btn, .s-portrait-btn *),
.desktop .portrait-btn__link:hover .portrait-btn__img:is(.s-portrait-btn, .s-portrait-btn *),
.swiper-slide-active .portrait-btn__link .portrait-btn__img:is(.s-portrait-btn, .s-portrait-btn *) {
  filter: grayscale(0);
}
.desktop .portrait-btn__link:focus .portrait-btn__title:is(.s-portrait-btn, .s-portrait-btn *),
.desktop .portrait-btn__link:hover .portrait-btn__title:is(.s-portrait-btn, .s-portrait-btn *),
.swiper-slide-active .portrait-btn__link .portrait-btn__title:is(.s-portrait-btn, .s-portrait-btn *) {
  opacity: 1;
}
.desktop .portrait-btn__link:focus .portrait-btn__halo:is(.s-portrait-btn, .s-portrait-btn *):after,
.desktop .portrait-btn__link:hover .portrait-btn__halo:is(.s-portrait-btn, .s-portrait-btn *):after,
.swiper-slide-active .portrait-btn__link .portrait-btn__halo:is(.s-portrait-btn, .s-portrait-btn *):after {
  transform: translateZ(0);
}
.portrait-btn__halo:is(.s-portrait-btn, .s-portrait-btn *) {
  position: absolute;
  top: -16px;
  left: 50%;
  z-index: -1;
  width: var(--halo-size);
  height: var(--halo-size);
  border-radius: 100%;
  overflow: hidden;
  transform: translate3d(-50%, 0, 0);
  transition: transform .9s cubic-bezier(.25, .46, .45, .94);
  -webkit-mask:
    radial-gradient(
      circle at 50%,
      at 50%,
      transparent 0 calc(var(--halo-size)/2 - 1.5px),
      red calc(var(--halo-size)/2 - 1px) 100%) 0 0/100% 100% no-repeat;
  mask:
    radial-gradient(
      circle at 50%,
      at 50%,
      transparent 0 calc(var(--halo-size)/2 - 1.5px),
      red calc(var(--halo-size)/2 - 1px) 100%) 0 0/100% 100% no-repeat;
  -webkit-mask:
    radial-gradient(
      circle at 50% 50%,
      transparent 0 calc(var(--halo-size)/2 - 1.5px),
      red calc(var(--halo-size)/2 - 1px) 100%) 0 0/100% 100% no-repeat;
  mask:
    radial-gradient(
      circle at 50% 50%,
      transparent 0 calc(var(--halo-size)/2 - 1.5px),
      red calc(var(--halo-size)/2 - 1px) 100%) 0 0/100% 100% no-repeat;
}
.portrait-btn__halo:is(.s-portrait-btn, .s-portrait-btn *):after {
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background:
    linear-gradient(
      180deg,
      var(--color-lighter-pink),
      hsla(0, 0%, 100%, 0) 80%);
  transform: translate3d(0, -80%, 0);
  transition: inherit;
}
.portrait-btn__img:is(.s-portrait-btn, .s-portrait-btn *) {
  filter: grayscale(1);
  transition: filter .75s cubic-bezier(.25, .46, .45, .94);
  width: 190px;
  height: 180px;
  position: relative;
}
.portrait-btn__img picture:is(.s-portrait-btn, .s-portrait-btn *) {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  max-width: unset;
  min-width: 100%;
  max-height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: top;
  -webkit-mask-image:
    linear-gradient(
      180deg,
      red 50%,
      transparent 90%);
  mask-image:
    linear-gradient(
      180deg,
      red 50%,
      transparent 90%);
  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
}
.portrait-btn--small .portrait-btn__img:is(.s-portrait-btn, .s-portrait-btn *) {
  min-width: unset;
  width: 114px;
  height: 114px;
}
.portrait-btn__title:is(.s-portrait-btn, .s-portrait-btn *) {
  display: table-caption;
  caption-side: bottom;
  opacity: .4;
  transition: opacity .75s cubic-bezier(.25, .46, .45, .94);
  min-height: 2.8em;
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/components/picture.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************/
img:is(.s-picture, .s-picture *),
picture:is(.s-picture, .s-picture *) {
  display: block;
}
img:is(.s-picture, .s-picture *) {
  width: 100%;
  height: auto;
}

/*!******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/components/button.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************/
.button {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding: 25px 32px;
  border-radius: 50px;
  color: unset;
  text-align: center;
  transition: opacity .9s cubic-bezier(.215, .61, .355, 1);
  background: unset;
}
.button.animated {
  visibility: hidden;
  opacity: 0;
  transition: .9s cubic-bezier(.215, .61, .355, 1);
  transition-property: opacity, visibility;
  transition-delay: 0s, .9s;
}
.button.animated.display {
  opacity: 1;
  visibility: inherit;
  transition-delay: 0s;
}
.button__bg {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  transition: transform .9s cubic-bezier(.215, .61, .355, 1);
}
.desktop .button:focus .button__bg,
.desktop .button:hover .button__bg {
  transform: scale(1.05);
}
.button__icon {
  margin-right: 10px;
  flex-shrink: 0;
}
.button__inner {
  opacity: .8;
}
.button__duration {
  margin-left: 10px;
  color: var(--color-white);
  transition: color .9s cubic-bezier(.215, .61, .355, 1);
}
.button__line {
  opacity: .5;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  transition: transform .5s cubic-bezier(.215, .61, .355, 1);
}
.button--invert {
  color: var(--color-white);
}
.button--primary {
  color: var(--color-text);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.button--primary:after {
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  border-radius: inherit;
  background: var(--color-theme-normal);
  opacity: 0;
  transition: opacity .9s cubic-bezier(.215, .61, .355, 1), transform .9s cubic-bezier(.215, .61, .355, 1);
}
.desktop .button--primary:focus:after,
.desktop .button--primary:hover:after {
  opacity: 1;
  transform: scale(1.05);
}
.desktop .button--primary:focus .button__duration,
.desktop .button--primary:hover .button__duration {
  color: var(--color-text);
}
.button--secondary {
  color: inherit;
  border: 1px solid;
}
.button--secondary .button__bg {
  fill: none;
}
.desktop .button--secondary:focus,
.desktop .button--secondary:hover {
  opacity: .4;
}
.button--tertiary {
  padding: 0;
  height: 64px;
  position: relative;
}
.button--tertiary .button__bg {
  fill: none;
}
.desktop .button--tertiary:focus .button__inner,
.desktop .button--tertiary:hover .button__inner {
  opacity: .32;
}
.desktop .button--tertiary:focus .button__line,
.desktop .button--tertiary:hover .button__line {
  transform: translate3d(-50%, -50%, 0) rotate(-90deg);
}
/* Visit Vietri: readable label on the brand-coloured fill (white on blue/green, grey on yellow) */
.button--primary {
  color: var(--color-theme-contrast, var(--color-text));
  transition: opacity .9s cubic-bezier(.215, .61, .355, 1), color .9s cubic-bezier(.215, .61, .355, 1);
}
.desktop .button--primary:focus .button__duration,
.desktop .button--primary:hover .button__duration {
  color: var(--color-theme-contrast, var(--color-text));
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/components/video-lightbox.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************/
.lightbox:is(.s-lightbox-docu, .s-lightbox-docu *) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  z-index: 1000;
  background-color: #000;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: .9s cubic-bezier(.215, .61, .355, 1);
  transition-property: opacity, visibility;
  transition-delay: 0s, .9s;
}
.lightbox.display:is(.s-lightbox-docu, .s-lightbox-docu *) {
  visibility: inherit;
  opacity: 1;
  transition-delay: 0s;
  pointer-events: auto;
}
.lightbox__video:is(.s-lightbox-docu, .s-lightbox-docu *),
.lightbox__video:is(.s-lightbox-docu, .s-lightbox-docu *) .video__plyr {
  height: 100%;
}
.lightbox__video:is(.s-lightbox-docu, .s-lightbox-docu *) .video__plyr .plyr {
  max-height: var(--app-height);
  aspect-ratio: 16/9;
  margin: 0 auto;
}
.lightbox__close:is(.s-lightbox-docu, .s-lightbox-docu *) {
  position: absolute;
  top: 24px;
  right: 24px;
  color: var(--color-white);
  background: unset;
}
.lightbox__close:is(.s-lightbox-docu, .s-lightbox-docu *):not(.visible) {
  opacity: 0;
  pointer-events: none;
}

/*!************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/components/round-button.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************/
.round-button {
  position: relative;
  color: var(--color-text);
  text-align: center;
  border-radius: 50%;
  background: unset;
  padding: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity .5s ease;
}
.round-button.disabled {
  opacity: .4;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.round-button__bg {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  transition: stroke-dashoffset .9s cubic-bezier(.25, .46, .45, .94), transform .9s cubic-bezier(.215, .61, .355, 1);
  overflow: visible;
}
.round-button--primary {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.round-button--primary:after {
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: inherit;
  z-index: -1;
  background: var(--color-theme-normal);
  opacity: 0;
  transition: opacity .9s cubic-bezier(.215, .61, .355, 1), transform .9s cubic-bezier(.215, .61, .355, 1);
}
.desktop .round-button--primary:focus:after,
.desktop .round-button--primary:hover:after,
.round-button--primary.active:after {
  opacity: 1;
  transform: scale(1.05);
}
.desktop .round-button--primary:focus .round-button__bg,
.desktop .round-button--primary:hover .round-button__bg,
.round-button--primary.active .round-button__bg {
  transform: scale(1.05);
}
.round-button--secondary {
  --path-length:0;
  color: inherit;
  transition: opacity .9s cubic-bezier(.215, .61, .355, 1);
}
.round-button--secondary .round-button__bg {
  stroke: currentColor;
  fill: none !important;
}
.desktop .round-button--secondary:focus,
.desktop .round-button--secondary:hover,
.round-button--secondary.hover {
  opacity: .4;
}
.round-button--secondary.animated {
  visibility: hidden;
  opacity: 0;
  transition: 0s ease .9s;
  transition-property: opacity, visibility;
}
.round-button--secondary.animated .round-button__bg {
  stroke-dasharray: var(--path-length);
  stroke-dashoffset: var(--path-length);
  transition: stroke-dashoffset .9s cubic-bezier(.215, .61, .355, 1);
}
.round-button--secondary.animated .round-button__inner {
  visibility: hidden;
  opacity: 0;
  transition: .9s cubic-bezier(.215, .61, .355, 1);
  transition-property: inherit;
  transition-delay: 0s, .9s;
}
.round-button--secondary.animated.display {
  visibility: inherit;
  opacity: 1;
  transition-delay: 0s;
}
.round-button--secondary.animated.display .round-button__bg {
  stroke-dashoffset: 0;
  transition-delay: .2s;
}
.round-button--secondary.animated.display .round-button__inner {
  visibility: inherit;
  opacity: 1;
  transition-delay: 0s;
}
.round-button--large {
  --path-length:453.389;
  width: var(--xl);
  height: var(--xl);
}
.round-button--large .round-button__icon {
  width: 24px;
  height: 24px;
}
.round-button--medium {
  --path-length:326.7256;
  width: 104px;
  height: 104px;
}
.round-button--medium .round-button__icon {
  width: 24px;
  height: 24px;
}
.round-button--small {
  --path-length:101.5309;
  width: var(--s);
  height: var(--s);
}
.round-button--small .round-button__icon {
  width: 16px;
  height: 16px;
}
/* Visit Vietri: readable icon on the brand-coloured hover fill */
.round-button--primary {
  transition: opacity .5s ease, color .9s cubic-bezier(.215, .61, .355, 1);
}
.desktop .round-button--primary:focus,
.desktop .round-button--primary:hover {
  color: var(--color-theme-contrast, var(--color-text));
}

/*!****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/components/halo.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************/
.halo:is(.s-halo, .s-halo *) {
  border-radius: 50%;
  width: 160%;
  height: auto;
  aspect-ratio: 1/1;
  position: fixed;
  z-index: -1;
  top: calc(100% - 80px);
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  max-width: unset;
  background-color: var(--color-theme-normal);
  filter: blur(100px);
}
@media only screen and (max-width: 900px) {
  .halo:is(.s-halo, .s-halo *) {
    width: 220%;
  }
}
.halo--dark:is(.s-halo, .s-halo *) {
  background-color: var(--color-theme-dark);
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/components/smooth-scroll.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************/
#smooth-wrapper:is(.s-smooth-scroll, .s-smooth-scroll *) {
  width: 100vw;
}
#smooth-content:is(.s-smooth-scroll, .s-smooth-scroll *),
#smooth-wrapper.locked:is(.s-smooth-scroll, .s-smooth-scroll *) {
  pointer-events: none;
}
#smooth-content:is(.s-smooth-scroll, .s-smooth-scroll *) {
  overflow: hidden;
}
.layout.no-transition #smooth-content:is(.s-smooth-scroll, .s-smooth-scroll *) .page-content {
  transition: none !important;
}
body.loader-out #smooth-content.display:is(.s-smooth-scroll, .s-smooth-scroll *) {
  pointer-events: auto;
}
.histoire-switch:is(.s-smooth-scroll, .s-smooth-scroll *) {
  position: fixed;
  z-index: -1;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100vw;
  pointer-events: none;
}
.histoire-switch.compress:is(.s-smooth-scroll, .s-smooth-scroll *) {
  --out-delay:1.1s;
  --duration:0s;
}
.histoire-switch.compress .histoire-switch__halo:is(.s-smooth-scroll, .s-smooth-scroll *) {
  --out-delay:0.4s;
  --duration:0.7s;
  opacity: 0;
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/components/scrollbar.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************/
.scrollbar:is(.s-scrollbar, .s-scrollbar *) {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 10000;
  width: 12px;
  height: var(--app-height);
  padding: 2px;
  color: var(--color-gray);
  opacity: 0;
  transition: color .9s cubic-bezier(.215, .61, .355, 1), opacity .4s ease;
}
[data-theme=light] .scrollbar:is(.s-scrollbar, .s-scrollbar *) {
  color: var(--color-text);
}
.scrollbar:is(.s-scrollbar, .s-scrollbar *):before {
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  position: absolute;
  opacity: 0;
  transition: opacity .4s ease;
}
.scrollbar:is(.s-scrollbar, .s-scrollbar *):before,
.scrollbar__thumb:is(.s-scrollbar, .s-scrollbar *) {
  width: 100%;
  background-color: currentColor;
}
.scrollbar__thumb:is(.s-scrollbar, .s-scrollbar *) {
  display: block;
  position: relative;
  transform: translateY(calc(var(--pos)*100vh));
  height: calc(var(--height)*100%);
  border-radius: 5px;
  opacity: .4;
}
.desktop .scrollbar__thumb:is(.s-scrollbar, .s-scrollbar *):hover,
.scrollbar.active .scrollbar__thumb:is(.s-scrollbar, .s-scrollbar *) {
  opacity: 1;
}
.scrollbar--full:is(.s-scrollbar, .s-scrollbar *):before {
  opacity: .2;
}
.scrollbar--visible:is(.s-scrollbar, .s-scrollbar *) {
  opacity: 1;
}

/*!***********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/home/intro.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************/
.homepage {
  width: 100%;
}
.homepage .bio {
  --in-delay:0.4s;
}
.intro:is(.s-intro, .s-intro *) {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: var(--app-height);
  z-index: 89;
  color: var(--color-white);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.intro.catch-mouse:is(.s-intro, .s-intro *) {
  cursor: none;
}
.intro.display:is(.s-intro, .s-intro *) {
  visibility: inherit;
  opacity: 1;
  pointer-events: auto;
}
.intro__halo:is(.s-intro, .s-intro *) {
  width: 70vmax;
  height: 70vmax;
  transform: translate3d(-10%, var(--s), 0);
}
.intro .intro__skip:is(.s-intro, .s-intro *) {
  position: absolute;
  bottom: 20px;
  right: 20px;
}
@media only screen and (max-width: 900px) {
  .intro .intro__skip:is(.s-intro, .s-intro *) {
    right: 50%;
    transform: translate3d(50%, 0, 0);
  }
}
.intro .intro__sound:is(.s-intro, .s-intro *) {
  position: absolute;
  width: 120px;
  height: 120px;
  --path-length:377.99111;
  transform: translate(-50%, -50%);
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.intro .intro__sound:is(.s-intro, .s-intro *):before {
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50%;
  background: var(--color-white);
  z-index: -1;
  opacity: .2;
  filter: blur(60px);
  transform: translateZ(0);
}
.intro .intro__sound.animated:is(.s-intro, .s-intro *):before {
  opacity: 0;
  transition: opacity .9s cubic-bezier(.215, .61, .355, 1);
}
.intro .intro__sound.animated.display:is(.s-intro, .s-intro *):before {
  opacity: .2;
}
body.mobile .intro .intro__sound:is(.s-intro, .s-intro *),
body.tablet .intro .intro__sound:is(.s-intro, .s-intro *) {
  display: none;
}
@media only screen and (max-width: 900px) {
  .intro .intro__sound:is(.s-intro, .s-intro *) {
    display: none;
  }
}
.intro__slides:is(.s-intro, .s-intro *) {
  height: 100%;
  text-align: center;
  --easing:cubic-bezier(0.445,0.05,0.55,0.95);
  --duration:1.5s;
}
.intro__slides .row:is(.s-intro, .s-intro *) {
  height: 100%;
  position: relative;
}
.intro__slide:is(.s-intro, .s-intro *) {
  position: absolute;
  text-align: center;
  --easing:cubic-bezier(0.445,0.05,0.55,0.95);
  --duration:1.5s;
}
.intro__caption:is(.s-intro, .s-intro *) {
  margin-top: var(--s);
  visibility: hidden;
  opacity: 0;
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/components/background-halo.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************/
.background-halo:is(.s-background-halo, .s-background-halo *) {
  position: absolute;
  top: 0;
  width: 70vmax;
  height: 70vmax;
  z-index: -1;
  pointer-events: none;
  --opacity:0.2;
  transform: translate(var(--translate-x), var(--translate-y)) rotate(var(--rotation));
}
.background-halo.align--left:is(.s-background-halo, .s-background-halo *) {
  left: 0;
}
.background-halo.align--right:is(.s-background-halo, .s-background-halo *) {
  right: 0;
}
.background-halo canvas:is(.s-background-halo, .s-background-halo *) {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}
.background-halo .plane:is(.s-background-halo, .s-background-halo *) {
  width: 100%;
  height: 100%;
}
.background-halo > img:is(.s-background-halo, .s-background-halo *) {
  opacity: var(--opacity);
}
.background-halo .theme-overlay:is(.s-background-halo, .s-background-halo *),
.background-halo > img:is(.s-background-halo, .s-background-halo *) {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}
.background-halo .theme-overlay:is(.s-background-halo, .s-background-halo *) {
  filter: blur(100px);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.background-halo .theme-overlay > div:is(.s-background-halo, .s-background-halo *) {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 100%;
  transition: 1.1s cubic-bezier(.25, .46, .45, .94);
  transition-property: opacity, visibility;
  transition-delay: 0s, 1.1s;
  background: var(--gradient-main);
  visibility: hidden;
  opacity: 0;
}
.background-halo .theme-overlay > div.show-overlay:is(.s-background-halo, .s-background-halo *) {
  transition-duration: .9s;
  visibility: inherit;
  opacity: 1;
  transition-delay: 0s;
}

/*!**********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/home/hero.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************/
.landing:is(.s-hero, .s-hero *) {
  padding: var(--s) 50px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  min-height: 100vh;
}
.landing__side:is(.s-hero, .s-hero *) {
  position: relative;
  z-index: 1;
  color: var(--color-text);
  pointer-events: none;
  text-align: center;
  margin-top: var(--s);
  --duration:1.5s;
  --easing:cubic-bezier(0.445,0.05,0.55,0.95);
}
.landing__side p:is(.s-hero, .s-hero *) {
  pointer-events: auto;
}
@media only screen and (max-width: 900px) {
  .landing:is(.s-hero, .s-hero *) {
    padding: 0 20px;
    min-height: none;
  }
  .landing__side:is(.s-hero, .s-hero *) {
    margin-top: 24px;
  }
}
h1:is(.s-hero, .s-hero *) {
  text-transform: uppercase;
  line-height: 1.1em;
  aspect-ratio: 1240/410;
}
@media only screen and (max-width: 900px) {
  h1:is(.s-hero, .s-hero *) {
    aspect-ratio: unset;
    font-size: 8.2vw;
  }
}

/*!************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/components/shader-title.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************/
.shader-title:is(.s-shader-title, .s-shader-title *) {
  width: 100%;
  position: relative;
  opacity: 0;
}
.shader-title.loaded:is(.s-shader-title, .s-shader-title *) {
  opacity: 1;
}
.shader-title.loaded:is(.s-shader-title, .s-shader-title *)::selection {
  color: red;
}
.shader-title.loaded .shader-title__content:is(.s-shader-title, .s-shader-title *) {
  color: transparent;
}
.shader-title.loaded .shader-title__canvas:is(.s-shader-title, .s-shader-title *) {
  visibility: hidden;
}
.shader-title.alternating:is(.s-shader-title, .s-shader-title *) .anim--split__line:nth-child(2n) {
  text-align: right !important;
}
.shader-title.centered:is(.s-shader-title, .s-shader-title *) {
  text-align: center;
}
.shader-title__content:is(.s-shader-title, .s-shader-title *) {
  color: #000;
}
.shader-title__content:is(.s-shader-title, .s-shader-title *) > * {
  padding: .2em 0;
  margin: -.2em 0;
}
.shader-title.fallback:is(.s-shader-title, .s-shader-title *) {
  transition: opacity .9s cubic-bezier(.215, .61, .355, 1);
  opacity: 1;
}
.shader-title.fallback--large-text:is(.s-shader-title, .s-shader-title *),
.shader-title.fallback--large-text:is(.s-shader-title, .s-shader-title *) .anim--split__line {
  background-image: var(--gradient-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.flexible[data-theme=light] .shader-title.fallback--large-text:is(.s-shader-title, .s-shader-title *),
.flexible[data-theme=light] .shader-title.fallback--large-text:is(.s-shader-title, .s-shader-title *) .anim--split__line {
  background-image: var(--gradient-title);
}
.shader-title.fallback--epoque:is(.s-shader-title, .s-shader-title *) .anim--split__line {
  background-image: var(--gradient-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.shader-title__canvas:is(.s-shader-title, .s-shader-title *) {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  pointer-events: none;
}

/*!*************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/home/anchors.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************/
@keyframes picture-slide-in {
  0% {
    transform: translateZ(0) rotate(-4deg);
  }
  to {
    transform: rotate(-8deg) translate3d(-24px, 12px, 0);
  }
}
@keyframes picture-slide-out {
  0% {
    transform: rotate(-8deg) translate3d(-24px, 12px, 0);
  }
  to {
    transform: rotate(-10deg) translate3d(-40px, 16px, 0);
  }
}
.anchors:is(.s-anchors, .s-anchors *) {
  position: relative;
  padding-top: 0;
  padding-bottom: 20vh;
  color: var(--color-text);
}
@media only screen and (max-width: 900px) {
  .anchors:is(.s-anchors, .s-anchors *) {
    min-height: 0;
    padding-bottom: var(--l);
  }
}
.anchors .row:is(.s-anchors, .s-anchors *) {
  height: 100%;
}
.anchors .background-halo:is(.s-anchors, .s-anchors *) {
  top: -10%;
}
@media only screen and (max-width: 900px) {
  .anchors .background-halo:is(.s-anchors, .s-anchors *) {
    width: 110vmin;
    height: 110vmin;
    transform: translateZ(0) rotate(-70deg);
  }
}
.anchors__diag:is(.s-anchors, .s-anchors *) {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto 0;
  padding: 0;
  width: 50%;
  height: auto;
  aspect-ratio: 1/1;
  opacity: .5;
  transform: translateZ(0);
}
@media only screen and (max-width: 900px) {
  .anchors__diag:is(.s-anchors, .s-anchors *) {
    width: calc(100% - 80px);
    margin: auto;
    right: 0;
    top: var(--m);
  }
}
.anchors__content:is(.s-anchors, .s-anchors *) {
  --easing:cubic-bezier(0.445,0.05,0.55,0.95);
  --in-delay:0.3s;
}
.anchors__title:is(.s-anchors, .s-anchors *) {
  text-transform: uppercase;
  margin-bottom: var(--s);
}
@media only screen and (max-width: 900px) {
  .anchors__title:is(.s-anchors, .s-anchors *) {
    margin-bottom: 24px;
  }
}
.anchors__list:is(.s-anchors, .s-anchors *) {
  display: grid;
  grid-template-columns: 1fr;
  grid-column-gap: var(--xs);
  -moz-column-gap: var(--xs);
  grid-column-gap: var(--xs);
  column-gap: var(--xs);
  grid-row-gap: var(--xs);
  grid-row-gap: var(--xs);
  row-gap: var(--xs);
  justify-items: flex-start;
}
.anchors__list li:is(.s-anchors, .s-anchors *) {
  position: relative;
}
@media only screen and (max-width: 900px) {
  .anchors__list:is(.s-anchors, .s-anchors *) {
    grid-gap: var(--xxs);
  }
}
.anchors__images:is(.s-anchors, .s-anchors *) {
  position: relative;
  padding-top: 35.2%;
}
@media only screen and (max-width: 900px) {
  .anchors__images:is(.s-anchors, .s-anchors *) {
    display: none;
  }
}
.anchors__images picture:is(.s-anchors, .s-anchors *) {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
  transition: opacity .7s cubic-bezier(.215, .61, .355, 1);
  animation: picture-slide-out .4s cubic-bezier(.215, .61, .355, 1) 1 forwards;
}
.anchors__images picture.active:is(.s-anchors, .s-anchors *) {
  opacity: .8;
  transition-delay: .4s;
  animation: picture-slide-in .9s cubic-bezier(.215, .61, .355, 1) .4s 1 forwards;
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/home/epoque-bullet.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************/
.epoque-bullet__link:is(.s-epoque-bullet, .s-epoque-bullet *) {
  display: block;
  position: relative;
  color: unset;
  background: unset;
  text-align: left;
  width: calc(100% + var(--s) + 24px);
  padding-left: calc(var(--s) + 24px);
  left: calc(-24px - var(--s));
}
@media only screen and (max-width: 900px) {
  .epoque-bullet__link:is(.s-epoque-bullet, .s-epoque-bullet *) {
    display: flex;
    align-items: center;
  }
  .epoque-bullet__link > span:is(.s-epoque-bullet, .s-epoque-bullet *) {
    margin-left: var(--xxs);
  }
}
.epoque-bullet .epoque-bullet__btn:is(.s-epoque-bullet, .s-epoque-bullet *) {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto 0;
  color: var(--color-text);
  transform: translateZ(0);
  transition: .9s cubic-bezier(.215, .61, .355, 1);
  transition-property:
    width,
    height,
    transform;
  opacity: 1 !important;
}
@media only screen and (max-width: 900px) {
  .epoque-bullet .epoque-bullet__btn:is(.s-epoque-bullet, .s-epoque-bullet *) {
    position: relative;
    margin: 0;
    width: 48px;
    height: 48px;
  }
}
.epoque-bullet__line:is(.s-epoque-bullet, .s-epoque-bullet *) {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  pointer-events: none;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: stroke-dashoffset .9s cubic-bezier(.215, .61, .355, 1);
}
.epoque-bullet.active:is(.s-epoque-bullet, .s-epoque-bullet *) {
  z-index: 1;
}
.epoque-bullet.active .epoque-bullet__line:is(.s-epoque-bullet, .s-epoque-bullet *) {
  stroke-dashoffset: 800;
  transition-delay: .2s;
}
.epoque-bullet.active .epoque-bullet__btn:is(.s-epoque-bullet, .s-epoque-bullet *) {
  transform: scale(1.25) translateZ(0);
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/home/epoque-push.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************/
body:not(.desktop) .section:is(.s-epoques, .s-epoques *) {
  background-color: var(--color-black);
}
.epoque-push:is(.s-epoque-push, .s-epoque-push *) {
  text-align: center;
  height: 200vh;
  position: relative;
  --in-delay:0.4s;
}
@media only screen and (max-width: 900px) {
  .epoque-push:is(.s-epoque-push, .s-epoque-push *) {
    height: unset;
  }
}
.epoque-push__content:is(.s-epoque-push, .s-epoque-push *) {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  padding-top: var(--l);
  padding-bottom: var(--m);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
@media only screen and (max-width: 900px) {
  .epoque-push__content:is(.s-epoque-push, .s-epoque-push *) {
    position: relative;
    display: block;
    height: unset;
    opacity: 1 !important;
    visibility: visible !important;
    padding-top: var(--m);
    padding-left: 20px;
    padding-right: 20px;
  }
}
.epoque-push__bg:is(.s-epoque-push, .s-epoque-push *) {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  -webkit-mask: url(/img/mask-epoque.svg#mask);
  mask: url(/img/mask-epoque.svg#mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 150vmin;
  mask-size: 150vmin;
  -webkit-mask-position: 50%;
  mask-position: 50%;
  transform: translateZ(0);
  opacity: .2;
  filter: Grayscale(1);
  display: none;
}
body:not(.desktop) .epoque-push__bg:is(.s-epoque-push, .s-epoque-push *) {
  display: block;
}
@media only screen and (max-width: 900px) {
  .epoque-push__bg:is(.s-epoque-push, .s-epoque-push *) {
    -webkit-mask-image: url(/img/mask-epoque.svg#mask-mobile);
    mask-image: url(/img/mask-epoque.svg#mask-mobile);
    -webkit-mask-size: 125vmin;
    mask-size: 125vmin;
  }
}
.epoque-push__bg picture:is(.s-epoque-push, .s-epoque-push *),
.epoque-push__bg picture:is(.s-epoque-push, .s-epoque-push *) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.epoque-push__title:is(.s-epoque-push, .s-epoque-push *) {
  background-image: var(--gradient-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  padding-bottom: var(--xxs);
}
@media only screen and (max-width: 900px) {
  .epoque-push__title:is(.s-epoque-push, .s-epoque-push *) {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.epoque-push .btn-container:is(.s-epoque-push, .s-epoque-push *) {
  margin-top: var(--s);
}
.epoque-push .portrait-container:is(.s-epoque-push, .s-epoque-push *) {
  margin-top: var(--s);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: center;
  grid-gap: var(--xs);
}
@media only screen and (max-width: 900px) {
  .epoque-push .portrait-container .portrait-btn:is(.s-epoque-push, .s-epoque-push *) {
    margin: 0 16px;
  }
}
:is(.s-epoque-push, .s-epoque-push *) .epoque-push .portrait-container .portrait-btn__img {
  max-width: 190px;
  max-height: 190px;
  width: unset;
  height: 25vh;
  aspect-ratio: 1/1;
}
@media only screen and (max-width: 900px) {
  :is(.s-epoque-push, .s-epoque-push *) .epoque-push .portrait-container .portrait-btn__img {
    width: 190px;
    height: 190px;
  }
}
@media only screen and (max-width: 900px) {
  .epoque-push .portrait-container:is(.s-epoque-push, .s-epoque-push *) {
    display: flex;
    justify-content: normal;
    grid-gap: 0;
  }
  .epoque-push .portrait-container .swiper-slide:is(.s-epoque-push, .s-epoque-push *) {
    width: auto;
  }
}
.swiper-wrapper:is(.s-epoque-push, .s-epoque-push *) {
  position: relative;
  height: auto;
}
.swiper-navigation:is(.s-epoque-push, .s-epoque-push *) {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 40px;
  pointer-events: none;
}
.swiper:not(.swiper-initialized) .swiper-navigation:is(.s-epoque-push, .s-epoque-push *) {
  display: none;
}
.swiper-navigation > *:is(.s-epoque-push, .s-epoque-push *) {
  pointer-events: auto;
}

/*!*********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/home/bio.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************/
.bio:is(.s-bio, .s-bio *) {
  margin-top: -80vh;
  z-index: 1;
  pointer-events: none;
}
.bio .landing__button:is(.s-bio, .s-bio *),
.bio:is(.s-bio, .s-bio *) .row > div {
  pointer-events: auto;
}
body.mobile .bio:is(.s-bio, .s-bio *),
body.tablet .bio:is(.s-bio, .s-bio *) {
  margin-top: 0;
  background: var(--color-gray);
}
@media only screen and (max-width: 900px) {
  .bio:is(.s-bio, .s-bio *) {
    margin-top: 0;
    background: var(--color-gray);
  }
}
.bio .landing__button:is(.s-bio, .s-bio *) {
  margin-top: 36px;
}
.bio .landing__button.mobile:is(.s-bio, .s-bio *) {
  display: none;
  font-size: 11px;
  padding: 20px 24px;
}
body.mobile .bio .landing__button.desktop:is(.s-bio, .s-bio *),
body.tablet .bio .landing__button.desktop:is(.s-bio, .s-bio *) {
  display: none;
}
body.mobile .bio .landing__button.mobile:is(.s-bio, .s-bio *),
body.tablet .bio .landing__button.mobile:is(.s-bio, .s-bio *) {
  display: inline-flex;
  z-index: 1;
}
@media only screen and (max-width: 900px) {
  .bio .landing__button.desktop:is(.s-bio, .s-bio *) {
    display: none;
  }
  .bio .landing__button.mobile:is(.s-bio, .s-bio *) {
    display: inline-flex;
    z-index: 1;
  }
}
.bio .two-col:is(.s-bio, .s-bio *) {
  min-height: var(--app-height);
}
body.mobile .bio .two-col:is(.s-bio, .s-bio *),
body.tablet .bio .two-col:is(.s-bio, .s-bio *) {
  min-height: unset;
  padding-bottom: var(--l);
}
@media only screen and (max-width: 900px) {
  .bio .two-col:is(.s-bio, .s-bio *) {
    min-height: unset;
    padding-bottom: var(--s);
  }
}
.bio__container:is(.s-bio, .s-bio *) {
  color: var(--color-text);
  transition: color .9s cubic-bezier(.215, .61, .355, 1);
}
.bio__loop:is(.s-bio, .s-bio *),
.bio__picture:is(.s-bio, .s-bio *) {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
}
.bio__picture:is(.s-bio, .s-bio *) img {
  width: 100%;
  height: 100%;
  object-fit: inherit;
  object-position: var(--bg-x) var(--bg-y);
}
.bio__bg:is(.s-bio, .s-bio *) {
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
  transform: translateZ(0);
  color: var(--color-text);
  z-index: -1;
}
.bio__bg:is(.s-bio, .s-bio *),
.bio__bg:is(.s-bio, .s-bio *):after {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}
.bio__bg:is(.s-bio, .s-bio *):after {
  content: "";
  background: var(--color-black);
  opacity: .4;
}
body.mobile .bio__bg:is(.s-bio, .s-bio *),
body.tablet .bio__bg:is(.s-bio, .s-bio *) {
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 900px) {
  .bio__bg:is(.s-bio, .s-bio *) {
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 16px;
  }
}
.bio .bio__mobile-cta:is(.s-bio, .s-bio *) {
  display: none;
}
@media only screen and (max-width: 900px) {
  .bio .bio__mobile-cta:is(.s-bio, .s-bio *) {
    display: flex;
    pointer-events: auto;
  }
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/components/two-col.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************/
.two-col:is(.s-two-col, .s-two-col *) {
  color: var(--color-text);
  transition: color .9s cubic-bezier(.215, .61, .355, 1);
  padding-top: 120px;
}
@media only screen and (max-width: 900px) {
  .two-col:is(.s-two-col, .s-two-col *) {
    padding-top: var(--m);
  }
}
@media only screen and (max-width: 900px) {
  .two-col__left:is(.s-two-col, .s-two-col *) {
    margin-bottom: var(--xs);
  }
}
.two-col__right:is(.s-two-col, .s-two-col *) {
  position: relative;
  z-index: -2;
}
.two-col__surtitle:is(.s-two-col, .s-two-col *) {
  margin-bottom: var(--xxs);
}
.two-col__surtitle:is(.s-two-col, .s-two-col *),
.two-col__title:is(.s-two-col, .s-two-col *) {
  text-transform: uppercase;
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/components/video-loop.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************/
svg path:is(.s-icon-play-small, .s-icon-play-small *) {
  stroke: currentColor;
}
.video-loop:is(.s-video-loop, .s-video-loop *) {
  visibility: hidden;
  opacity: 0;
}
.video-loop.display:is(.s-video-loop, .s-video-loop *) {
  visibility: inherit;
  opacity: 1;
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/home/docu-header.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************/
.docu-header:is(.s-docu-header, .s-docu-header *) {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 2;
  color: var(--color-white);
  text-align: center;
}
.docu-header__content:is(.s-docu-header, .s-docu-header *) {
  position: relative;
}
.docu-header__length:is(.s-docu-header, .s-docu-header *) {
  position: absolute;
  bottom: 5%;
  left: 100%;
  margin-left: 8px;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  white-space: nowrap;
}
@media only screen and (max-width: 900px) {
  .docu-header__length:is(.s-docu-header, .s-docu-header *) {
    position: static;
    display: flex;
    justify-content: center;
    opacity: .8;
    margin-top: 16px;
    font-size: 12px;
    line-height: 1.4em;
    font-family: var(--font-text);
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: unset;
  }
}
.docu-header__line:is(.s-docu-header, .s-docu-header *) {
  margin-right: 8px;
}
@media only screen and (max-width: 900px) {
  .docu-header__line:is(.s-docu-header, .s-docu-header *) {
    opacity: .5;
    width: 6px;
    height: auto;
  }
}
.docu-header__button:is(.s-docu-header, .s-docu-header *) {
  margin-top: 32px;
}

/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/home/conseils.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
.conseils:is(.s-conseils, .s-conseils *) {
  position: relative;
  color: var(--color-text);
  padding-bottom: 136px;
}
body:not(.desktop) .conseils:is(.s-conseils, .s-conseils *) {
  background: var(--color-gray);
}
.conseils .landing__button:is(.s-conseils, .s-conseils *) {
  margin-top: 64px;
}
.conseils .landing__button.mobile:is(.s-conseils, .s-conseils *) {
  display: none;
}
@media only screen and (max-width: 900px) {
  .conseils .landing__button.desktop:is(.s-conseils, .s-conseils *) {
    display: none;
  }
  .conseils .landing__button.mobile:is(.s-conseils, .s-conseils *) {
    margin-top: 40px;
    display: inline-flex;
  }
}
.conseils .conseil-marquee:is(.s-conseils, .s-conseils *) {
  margin-top: 58px;
}
.conseils .background-halo:is(.s-conseils, .s-conseils *) {
  transform: translate3d(5%, 10%, 0) rotate(45deg);
}
@media only screen and (max-width: 900px) {
  .conseils:is(.s-conseils, .s-conseils *) {
    padding-bottom: var(--l);
  }
  .conseils .two-col:is(.s-conseils, .s-conseils *) {
    padding-top: var(--l);
  }
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/home/conseil-marquee.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************/
@keyframes translate-x {
  0% {
    transform: translateZ(0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}
.conseil-marquee .marquee:is(.s-conseil-marquee, .s-conseil-marquee *) {
  padding: 24px 0;
  display: flex;
  flex-wrap: nowrap;
}
.conseil-marquee .marquee__clone:is(.s-conseil-marquee, .s-conseil-marquee *) {
  display: flex;
  flex-wrap: nowrap;
  flex-shrink: 0;
}
.conseil-marquee .marquee .conseil-bullet:is(.s-conseil-marquee, .s-conseil-marquee *) {
  flex-shrink: 0;
  margin-right: 48px;
}

/*!********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/home/conseil-bullet.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************/
.conseil-bullet:is(.s-conseil-bullet, .s-conseil-bullet *) {
  color: unset;
  display: inline-flex;
  align-items: flex-start;
  position: relative;
}
.conseil-bullet__line:is(.s-conseil-bullet, .s-conseil-bullet *) {
  flex-shrink: 0;
  width: 20px;
  height: auto;
}
.conseil-bullet__number:is(.s-conseil-bullet, .s-conseil-bullet *) {
  margin-top: 4px;
}
.conseil-bullet__title:is(.s-conseil-bullet, .s-conseil-bullet *) {
  margin-left: var(--xxs);
}
.conseil-bullet.active:is(.s-conseil-bullet, .s-conseil-bullet *) {
  z-index: 5;
}
.conseil-bullet.active .conseil-bullet__img:is(.s-conseil-bullet, .s-conseil-bullet *) {
  opacity: 1;
}
.conseil-bullet__img:is(.s-conseil-bullet, .s-conseil-bullet *) {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  display: none;
  pointer-events: none;
  width: 290px;
  height: auto;
  transition: opacity .9s cubic-bezier(.215, .61, .355, 1);
}
.conseil-bullet__img video:is(.s-conseil-bullet, .s-conseil-bullet *) {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}
.conseil-bullet__img:is(.s-conseil-bullet, .s-conseil-bullet *) picture img {
  aspect-ratio: 16/9;
  object-fit: cover;
}
.desktop .conseil-bullet__img:is(.s-conseil-bullet, .s-conseil-bullet *) {
  display: unset;
}

/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/layout/footer.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
.footer:is(.s-footer, .s-footer *) {
  border-top: 1px solid hsla(0, 0%, 100%, .2);
  color: var(--color-white);
  background-color: var(--color-black);
  position: relative;
  padding: var(--m) 0;
  margin-top: -1px;
  z-index: 1;
}
.footer__nav:is(.s-footer, .s-footer *) {
  display: flex;
  flex-direction: column;
}
.footer__socials:is(.s-footer, .s-footer *) {
  display: grid;
  grid-auto-flow: column;
  justify-content: flex-start;
  align-content: center;
  align-items: center;
  grid-gap: 36px;
  margin-top: var(--xxs);
}
.footer__socials a:is(.s-footer, .s-footer *),
.footer__socials li:is(.s-footer, .s-footer *),
.footer__socials svg:is(.s-footer, .s-footer *) {
  display: block;
}
.footer__socials a:is(.s-footer, .s-footer *) {
  color: unset;
  transition: opacity .9s cubic-bezier(.215, .61, .355, 1);
}
.desktop .footer__socials a:is(.s-footer, .s-footer *):focus,
.desktop .footer__socials a:is(.s-footer, .s-footer *):hover {
  opacity: .4;
}
.footer__cta:is(.s-footer, .s-footer *) {
  margin-top: 24px;
}
.footer__cr:is(.s-footer, .s-footer *) {
  letter-spacing: .05em;
  opacity: .4;
  margin-top: auto;
}
.footer__cr.mobile:is(.s-footer, .s-footer *) {
  display: none;
}
@media only screen and (max-width: 900px) {
  .footer__cr:is(.s-footer, .s-footer *):not(.mobile) {
    display: none;
  }
  .footer__cr.mobile:is(.s-footer, .s-footer *) {
    display: unset;
  }
}
@media only screen and (max-width: 900px) {
  .footer:is(.s-footer, .s-footer *) {
    padding: 32px 0;
  }
  .footer__nav:is(.s-footer, .s-footer *) {
    margin-top: 52px;
  }
  .footer__cr:is(.s-footer, .s-footer *) {
    margin-top: 32px;
  }
}
/* Visit Vietri: brand pattern band + logo */
.footer:is(.s-footer, .s-footer *) {
  padding-top: 0;
  overflow: hidden;
}
.footer__pattern:is(.s-footer, .s-footer *) {
  height: 226px;
  margin-bottom: var(--m);
  background: url(/img/brand/pattern.svg) 0 0 / 240px auto repeat-x;
  -webkit-mask-image: linear-gradient(180deg, #000 35%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000 35%, rgba(0, 0, 0, 0) 100%);
  opacity: .9;
}
.footer__logo:is(.s-footer, .s-footer *) {
  display: block;
  width: 220px;
  height: auto;
  margin-bottom: var(--s);
  color: var(--color-white);
}
@media only screen and (max-width: 900px) {
  .footer__pattern:is(.s-footer, .s-footer *) {
    height: 150px;
    background-size: 160px auto;
    margin-bottom: 32px;
  }
  .footer__logo:is(.s-footer, .s-footer *) {
    width: 160px;
    margin-bottom: 32px;
  }
}

/*!***************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/layout/credits.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************/
.credits:is(.s-credits, .s-credits *) {
  display: flex;
  flex-wrap: wrap;
  grid-gap: var(--xxs);
  gap: var(--xxs);
}
.credits__entry:is(.s-credits, .s-credits *) {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}
.credits__link:is(.s-credits, .s-credits *) {
  transition: opacity .9s cubic-bezier(.215, .61, .355, 1);
  margin-left: 8px;
}
.desktop .credits__link:is(.s-credits, .s-credits *):focus,
.desktop .credits__link:is(.s-credits, .s-credits *):hover {
  opacity: .4;
}
path:is(.s-icon-facebook, .s-icon-facebook *) {
  fill: currentColor;
}
path:is(.s-icon-youtube, .s-icon-youtube *) {
  fill: currentColor;
}
.credits__link:is(.s-credits, .s-credits *) {
  color: unset;
  opacity: .7;
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/components/video.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************/
.video {
  width: 100%;
  position: relative;
}
.video__poster {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
  display: block;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: .9s cubic-bezier(.215, .61, .355, 1);
  transition-property: opacity, visibility;
  transition-delay: 0s, .9s;
}
.video__poster-picture {
  width: 100%;
}
.video__poster-picture img {
  aspect-ratio: 16/9;
  object-fit: cover;
}
.video.stopped .video__poster {
  visibility: inherit;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}
.desktop .video__poster:focus .video__loop,
.desktop .video__poster:hover .video__loop {
  visibility: inherit;
  opacity: 1;
}
.video__loop {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.plyr {
  position: relative;
  --plyr-control-icon-size:16px;
  --plyr-control-radius:50%;
  --plyr-range-track-height:1px;
  --plyr-range-fill-background:var(--color-white);
}
.video.stopped .plyr {
  visibility: hidden;
}
.plyr--video .plyr__controls {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  position: absolute;
  display: flex;
  align-items: flex-end;
  height: 100%;
  pointer-events: none;
}
.plyr--video .plyr__controls-inner {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 24px;
  pointer-events: auto;
}
@media only screen and (max-width: 480px) {
  .plyr--video .plyr__controls-inner {
    padding: 12px;
  }
}
.plyr--video.plyr--hide-controls .plyr__close {
  opacity: 0;
  pointer-events: none;
}
.plyr__video-embed iframe {
  width: 100%;
  height: 100%;
}
.plyr__control {
  border: 1px solid var(--color-white);
  stroke: var(--color-white);
  padding: var(--plyr-control-icon-size);
  transition: opacity .9s cubic-bezier(.215, .61, .355, 1);
  background: none !important;
}
@media only screen and (max-width: 900px) {
  .plyr__control {
    padding: 0;
    border: none;
  }
}
.desktop .plyr__control:focus,
.desktop .plyr__control:hover {
  opacity: .4;
}
.plyr__control[data-plyr=play] {
  order: 0;
  margin-right: var(--plyr-control-icon-size) !important;
}
.plyr__control[data-plyr=fullscreen] {
  order: 5;
  margin: 0 0 0 var(--plyr-control-icon-size);
}
.plyr__control[data-plyr=captions] {
  border: none;
  padding: 0;
  margin-left: var(--plyr-control-icon-size);
}
.plyr__control[data-plyr=captions] svg {
  width: 24px;
  height: 24px;
  fill: var(--color-white);
  stroke: none;
}
.plyr__time {
  margin: 0 !important;
  padding: 0 !important;
}
.plyr__time--duration:before {
  margin: 0 8px;
}
.plyr__progress__container {
  margin-left: 16px !important;
}
.plyr__progress__buffer {
  display: none;
}
.plyr__progress input[type=range] {
  cursor: pointer;
}
.plyr__progress input[type=range]::-webkit-slider-thumb {
  opacity: 0;
}
.plyr__close {
  position: absolute;
  z-index: 2;
  top: 24px;
  right: 24px;
  stroke: #fff;
  background: none;
  pointer-events: auto;
  transition: opacity .5s ease;
  display: none;
}
.can-close .plyr__close {
  display: inline-block;
}
.plyr__close svg {
  width: 24px;
  height: 24px;
}
.plyr__volume {
  min-width: unset !important;
  width: unset !important;
  margin-left: 16px !important;
}

/*!******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/index.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************/
/*
 * Global stylesheet — imported once from app/layout.tsx.
 * Order matters: it mirrors the cascade of the original build.
 * Component styles are scoped with `:is(.s-<component>, .s-<component> *)`,
 * where `.s-<component>` is the class on the component root element.
 */
/* injected at runtime by the original app (video player) */