* {
  margin: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: sans-serif;
}

details summary::-webkit-details-marker,
details summary::marker {
 display: none; 
 content: "";
}

:root {
  --font-family-sans: sans-serif;
  --font-family-mono: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --color-text: rgb(23, 61, 0);
  --color-background: rgb(255, 255, 255);
  --color-green: rgb(255, 153, 0);
}

html {
  font-family: var(--font-family-sans);
  color: var(--color-text);
  background: var(--color-background);
}
img {
  width: 100%;
}

a:hover img,
a:focus img,
a:active img {
  outline: none;
  box-shadow: none;
}

body {
  overflow-x: hidden;
}

main{
  width: 100vw;
  height: auto;
  contain: paint;
}

li {
  list-style: none;
}
a {
  color: currentColor;
  text-decoration: none;
}
button {
  font: inherit;
  background: none;
  border: 0;
  color: currentColor;
  cursor: pointer;
}
strong, b {
  font-weight: 600;
}
small {
  font-size: inherit;
  color: var(--color-text);
  font-family: var(--font-family-mono);
}

.bg-light {
  background-color: var(--color-text);
}

#container{
  width: 98vw;
  height: 97vh;
  position: relative;
  z-index: 2;
}

#sticky{
  width: 100%;
  height: 10vh;
}

#header {
  margin: 0px;
  z-index: 200000;
  width: 100%;
  height: 10vh;

  padding-top: 20px;
  padding-bottom: 20px;
  
  background-color: var(--color-background);
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;

  position: fixed;
  top: 0;
}

@keyframes color{
  0% {
    transform: scale(0) skew(-30deg);
  
  }

  100% {
    transform: scale(1) skew(0deg);
  }
}

#test div{
  transition: background-color 0.5s ease;
}

#test{
  width: 98%;
  height: 100%;
  margin: 0px 0px 0px 10px;

  display: grid;
  color: var(--color-background);
  grid-template-columns: repeat(43, 1fr);
  grid-template-rows: repeat(37, 1fr);
  grid-gap: 0px;
}

#infos{
  width: 100%;
  height: auto;
  display: inline-flex;
  position: relative;

  font-family: sans-serif;
  font-size: 0.7rem;
  line-height: 1.15;
  margin: 0;
  padding: 0.75rem 10px;
  border-top: solid 1px var(--color-text);
  background-color: var(--color-background);

  font-weight: normal;
  text-decoration: none;
  color: var(--color-text);
  justify-content: space-between;
}

#infos li{
  width: 33%;
  margin-left: 5px;
  list-style: none;
}

/*///////////////////////////////////////////////LOGO//////////////////////////////////////*/

.un{
  background-color: var(--color-text);
  grid-column-end: 1;
  grid-column-start: 5;
  grid-row-end: 33;
  grid-row-start: 38;
}

.deux{
  background-color: var(--color-text);
  grid-column-end: 2;
  grid-column-start: 6;
  grid-row-end: 27;
  grid-row-start: 33;
}

.trois{
  background-color: var(--color-text);
  grid-column-end: 3;
  grid-column-start: 7;
  grid-row-end: 18;
  grid-row-start: 27;
}

.quatre{
  background-color: var(--color-text);
  grid-column-end: 4;
  grid-column-start: 7;
  grid-row-end: 14;
  grid-row-start: 18;
}

.cinq{
  background-color: var(--color-text);
  grid-column-end: 5;
  grid-column-start: 7;
  grid-row-end: 13;
  grid-row-start: 14;
}

.six{
  background-color: var(--color-text);
  grid-column-end: 5;
  grid-column-start: 10;
  grid-row-end: 2;
  grid-row-start: 13;
}

.sept{
  background-color: var(--color-text);
  grid-column-end: 8;
  grid-column-start: 11;
  grid-row-end: 13;
  grid-row-start: 18;
}

.huit{
  background-color: var(--color-text);
  grid-column-end: 9;
  grid-column-start: 11;
  grid-row-end: 18;
  grid-row-start: 31;
}

.neuf{
  background-color: var(--color-text);
  grid-column-end: 10;
  grid-column-start: 13;
  grid-row-end: 31;
  grid-row-start: 38;
}

.un_2{
  background-color: var(--color-text);
  grid-column-end: 11;
  grid-column-start: 13;
  grid-row-end: 31;
  grid-row-start: 28;
}

.deux_2{
  background-color: var(--color-text);
  grid-column-end: 13;
  grid-column-start: 14;
  grid-row-end: 25;
  grid-row-start: 35;
}

.trois_2{
  background-color: var(--color-text);
  grid-column-end: 14;
  grid-column-start: 15;
  grid-row-end: 32;
  grid-row-start: 20;
}

.quatre_2{
  background-color: var(--color-text);
  grid-column-end: 15;
  grid-column-start: 16;
  grid-row-end: 29;
  grid-row-start: 17;
}

.cinq_2{
  background-color: var(--color-text);
  grid-column-end: 16;
  grid-column-start: 17;
  grid-row-end: 24;
  grid-row-start: 13;
}

.six_2{
  background-color: var(--color-text);
  grid-column-end: 17;
  grid-column-start: 18;
  grid-row-end: 21;
  grid-row-start: 10;
}

.sept_2{
  background-color: var(--color-text);
  grid-column-end: 18;
  grid-column-start: 19;
  grid-row-end: 6;
  grid-row-start: 16;
}

.huit_2{
  background-color: var(--color-text);
  grid-column-end: 19;
  grid-column-start: 23;
  grid-row-end: 2;
  grid-row-start: 14;
}

.neuf_2{
  background-color: var(--color-text);
  grid-column-end: 20;
  grid-column-start: 23;
  grid-row-end: 14;
  grid-row-start: 25;
}

.dix_2{
  background-color: var(--color-text);
  grid-column-end: 23;
  grid-column-start: 24;
  grid-row-end: 2;
  grid-row-start: 11;
}

.un_3{
  background-color: var(--color-text);
  grid-column-end: 24;
  grid-column-start: 25;
  grid-row-end: 2;
  grid-row-start: 5;
}

.deux_3{
  background-color: var(--color-text);
  grid-column-end: 19;
  grid-column-start: 22;
  grid-row-end: 30;
  grid-row-start: 25;
}

.trois_3{
  background-color: var(--color-text);
  grid-column-end: 18;
  grid-column-start: 21;
  grid-row-end: 30;
  grid-row-start: 38;
}

.quatre_3{
  background-color: var(--color-text);
  grid-column-end: 26;
  grid-column-start: 29;
  grid-row-end: 33;
  grid-row-start: 12;
}

.cinq_3{
  background-color: var(--color-text);
  grid-column-end: 25;
  grid-column-start: 26;
  grid-row-end: 20;
  grid-row-start: 27;
}

.six_3{
  background-color: var(--color-text);
  grid-column-end: 27;
  grid-column-start: 29;
  grid-row-end: 33;
  grid-row-start: 36;
}

.sept_3{
  background-color: var(--color-text);
  grid-column-end: 29;
  grid-column-start: 31;
  grid-row-end: 30;
  grid-row-start: 37;
}

.huit_3{
  background-color: var(--color-text);
  grid-column-end: 31;
  grid-column-start: 32;
  grid-row-end: 32;
  grid-row-start: 38;
}

.neuf_3{
  background-color: var(--color-text);
  grid-column-end: 32;
  grid-column-start: 35;
  grid-row-end: 34;
  grid-row-start: 38;
}

.dix_3{
  background-color: var(--color-text);
  grid-column-end: 35;
  grid-column-start: 37;
  grid-row-end: 32;
  grid-row-start: 37;
}

.un_4{
  background-color: var(--color-text);
  grid-column-end: 37;
  grid-column-start: 38;
  grid-row-end: 30;
  grid-row-start: 36;
}

.deux_4{
  background-color: var(--color-text);
  grid-column-end: 38;
  grid-column-start: 41;
  grid-row-end: 29;
  grid-row-start: 38;
}

.trois_4{
  background-color: var(--color-text);
  grid-column-end: 39;
  grid-column-start: 42;
  grid-row-end: 24;
  grid-row-start: 29;
}

.quatre_4{
  background-color: var(--color-text);
  grid-column-end: 41;
  grid-column-start: 42;
  grid-row-end: 29;
  grid-row-start: 32;
}

.cinq_4{
  background-color: var(--color-text);
  grid-column-end: 42;
  grid-column-start: 42;
  grid-row-end: 24;
  grid-row-start: 27;
}

.six_4{
  background-color: var(--color-text);
  grid-column-end: 34;
  grid-column-start: 43;
  grid-row-end: 20;
  grid-row-start: 24;
}

.sept_4{
  background-color: var(--color-text);
  grid-column-end: 35;
  grid-column-start: 43;
  grid-row-end: 19;
  grid-row-start: 20;
}

.huit_4{
  background-color: var(--color-text);
  grid-column-end: 43;
  grid-column-start: 44;
  grid-row-end: 19;
  grid-row-start: 23;
}

.neuf_4{
  background-color: var(--color-text);
  grid-column-end: 34;
  grid-column-start: 41;
  grid-row-end: 2;
  grid-row-start: 7;
}

.dix_4{
  background-color: var(--color-text);
  grid-column-end: 41;
  grid-column-start: 44;
  grid-row-end: 6;
  grid-row-start: 14;
}

.un_5{
  background-color: var(--color-text);
  grid-column-end: 32;
  grid-column-start: 35;
  grid-row-end: 3;
  grid-row-start: 8;
}

.deux_5{
  background-color: var(--color-text);
  grid-column-end: 30;
  grid-column-start: 32;
  grid-row-end: 5;
  grid-row-start: 12;
}

.trois_5{
  background-color: var(--color-text);
  grid-column-end: 28;
  grid-column-start: 30;
  grid-row-end: 10;
  grid-row-start: 12;
}

.quatre_5{
  background-color: var(--color-text);
  grid-column-end: 29;
  grid-column-start: 30;
  grid-row-end: 12;
  grid-row-start: 16;
}

.cinq_5{
  background-color: var(--color-text);
  grid-column-end: 29;
  grid-column-start: 30;
  grid-row-end: 7;
  grid-row-start: 10;
}

.six_5{
  background-color: var(--color-text);
  grid-column-end: 41;
  grid-column-start: 43;
  grid-row-end: 4;
  grid-row-start: 6;
}

.sept_5{
  background-color: var(--color-text);
  grid-column-end: 39;
  grid-column-start: 41;
  grid-row-end: 7;
  grid-row-start: 8;
}

.huit_5{
  background-color: var(--color-text);
  grid-column-end: 40;
  grid-column-start: 41;
  grid-row-end: 8;
  grid-row-start: 9;
}

.neuf_5{
  background-color: var(--color-text);
  grid-column-end: 41;
  grid-column-start: 42;
  grid-row-end: 3;
  grid-row-start: 4;
}

.dix_5{
  background-color: var(--color-text);
  grid-column-end: 32;
  grid-column-start: 33;
  grid-row-end: 8;
  grid-row-start: 9;
}

.un_6{
  background-color: var(--color-text);
  grid-column-end: 27;
  grid-column-start: 28;
  grid-row-end: 10;
  grid-row-start: 12;
}

.deux_6{
  background-color: var(--color-text);
  grid-column-end: 28;
  grid-column-start: 29;
  grid-row-end: 7;
  grid-row-start: 10;
}

.trois_6{
  background-color: var(--color-text);
  grid-column-end: 6;
  grid-column-start: 10;
  grid-row-end: 1;
  grid-row-start: 2;
}

.quatre_6{
  background-color: var(--color-text);
  grid-column-end: 20;
  grid-column-start: 25;
  grid-row-end: 1;
  grid-row-start: 2;
}

.cinq_6{
  background-color: var(--color-text);
  grid-column-end: 34;
  grid-column-start: 41;
  grid-row-end: 1;
  grid-row-start: 2;
}

.six_6{
  background-color: var(--color-text);
  grid-column-end: 33;
  grid-column-start: 34;
  grid-row-end: 2;
  grid-row-start: 3;
}

.sept_6{
  background-color: var(--color-text);
  font-size: 10pt;
  grid-column-end: 11;
  grid-column-start: 12;
  grid-row-end: 18;
  grid-row-start: 28;
}

/*///////////////////////////////////////////////LOGO//////////////////////////////////////*/

.section {
  padding: 3rem 0;
}

.grid {
  --columns: 12;
  --gutter: 3rem;
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: 1fr;
}
.grid > .column {
  margin-bottom: var(--gutter);
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.text {
  line-height: 1.5em;
}
.text a {
  text-decoration: underline;
}
.text :first-child {
  margin-top: 0;
}
.text :last-child {
  margin-bottom: 0;
}
.text p,
.text ul,
.text ol {
  margin-bottom: 1.5rem;
}
.text ul,
.text ol {
  margin-left: 1rem;
}
.text ul p,
.text ol p {
  margin-bottom: 0;
}
.text ul > li {
  list-style: disc;
}
.text ol > li {
  list-style: decimal;
}
.text ul ol,
.text ul ul,
.text ol ul,
.text ol ol {
  margin-bottom: 0;
}
.text h1,
.intro {
  font-size: 2rem;
  margin-bottom: 3rem;
  line-height: 1.25em;
}

.header{
  display: inline-flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100vw;
  margin-top: 2em;
  margin-bottom: 3rem;

  padding-top: 1em;
}

#infos_header{
  display: inline-flex;
  flex-direction: row;
  width: 50%;
}

.work{
  display: inline-flex;
  flex-direction: column;
  font-size: 0.7rem;
  padding-right: 20px;
  width: 45%;
}

.school{
  display: inline-flex;
  flex-direction: column;
  font-size: 0.7rem;
  width: 45%;
}

.infos_header_1{
  display: inline-flex;
  flex-direction: column;
  font-size: 1.8rem;
  width: 45%;
  font-family: sans-serif;
}

.infos_header_1 h2{
  margin-bottom: 5px;
  font-size: 0.7rem;
  font-weight: bolder;
}

.work h2,
.school h2{
  font-size: 0.7rem;
  font-weight: bolder;
}


.work li:first-child,
.school li:first-child{
  margin-top: 0px;
}

.work li,
.school li{
  font-size: 0.7rem;
  width: auto;
  margin-top: 20px;
  margin-left: 0;
  break-inside: avoid;
}

.work ul,
.school ul{
/*   columns: 2;
  column-gap: 16px;
  column-fill: balance; */
  width: 100%;
}

/* .work p:first-child,
.school p:first-child{
  font-family: monospace;
  font-size: 0.6rem;
} */

/*..infos_header p:first-child::before{
  content: "→";
  margin-left: -10px;
}*/

/*.infos_header p::before{
  content: "↳";
  font-family: monospace;
  margin-left: -10px;
  margin-right: 1px;
}*/

.text h2,
.h2 {
  font-family: var(--font-family-mono);
  font-size: 0.5rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}
.text h3,
.h3 {
  font-family: var(--font-family-mono);
  font-weight: 600;
}
.text .codeblock {
  display: grid;
}
code {
  font-family: var(--font-family-mono);
  font-size: 1em;
  background: transparent;
  padding: 0;
  display: inline;
  color: inherit;
}
.text pre {
  margin: 3rem 0;
  background: var(--color-background);
  color: var(--color-text);
  padding: 1.5rem;
  overflow-x: scroll;
  overflow-y: hidden;
  line-height: 1.5rem;
}
.text pre code {
  padding: 0;
  background: none;
  color: inherit;
}
.text hr {
  margin: 6rem 0;
}
.text dt {
  font-weight: 600;
}
.text blockquote {
  font-size: 1.25rem;
  line-height: 1.325em;
  border-left: 2px solid var(--color-background);
  padding-left: 1rem;
  margin: 3rem 0;
  max-width: 25rem;
}
.text blockquote footer {
  font-size: .875rem;
  font-style: italic;
}

/* Showreel video block */
.showreel {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  display: block;
  overflow: hidden;
}

.showreel video {
  display: block;
  width: 100vw;
  max-width: 100vw;
  height: auto;
  object-fit: contain;
}

@media (max-width: 768px) {
  .showreel {
    width: 100vw;
    max-width: 100vw;
    max-height: 55vh;
  }

  .showreel video {
    width: 100vw;
    max-width: 100vw;
    max-height: 55vh;
  }
}
.text figure {
  margin: 3rem 0;
}
.text figcaption {
  padding-top: .75rem;
  color: var(--color-text);
}

hr {
  border: 0;
  background: currentColor;
  height: 2px;
  width: 1.5rem;
  margin: 3rem auto;
}

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

.intro {
  max-width: 40rem;
}
.intro *:not(:last-child) {
  margin-bottom: 1em;
}

.cta {
  background: var(--color-background);
  color: var(--color-text);
  display: inline-flex;
  justify-content: center;
  padding: .75rem 1.5rem;
  border: 4px solid var(--color-text);
  outline: 2px solid var(--color-background);
}

.box {
  background: var(--color-text);
  padding: 1.5rem;
  border: 4px solid var(--color-text);
  outline: 2px solid var(--color-text);
}

.video,
.img {
  position: relative;
  display: block;
  --w: 1;
  --h: 1;
  padding-bottom: calc(100% / var(--w) * var(--h));
  background: var(--color-background);
}
.img img,
.video iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
/*  width: 100%;*/
  height: 100%;
  object-fit: cover;
  border: 0;
}
.img[data-contain] img {
  object-fit: contain;
}
.img-caption,
.video-caption {
  padding-top: .75rem;
  line-height: 1.5em;
}

.footer {
  padding: 9rem 0 6rem;
  line-height: 1.5em;
}
.footer:before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 2px;
  background: var(--color-background);
  margin-bottom: 1.5rem;
}

.footer h2 {
  font-weight: 600;
  margin-bottom: .75rem;
}
.footer ul,
.footer p {
  color: var(--color-text);
}
.footer p {
  max-width: 15rem;
}
.footer a:hover {
  color: var(--color-text);
}


.map {
  --w: 2;
  --h: 1;
  padding-bottom: calc(100% / var(--w) * var(--h));
  position: relative;
  overflow: hidden;
  background: var(--color-background);
}
.map iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.margin-s {
  margin-bottom: .75rem;
}
.margin-m {
  margin-bottom: 1.5rem;
}
.margin-l {
  margin-bottom: 3rem;
}
.margin-xl {
  margin-bottom: 4.5rem;
}
.margin-xxl {
  margin-bottom: 6rem;
}

.pagination {
  display: flex;
  padding-top: 6rem;
}
.pagination > span {
  color: var(--color-text);
}
.pagination > * {
  padding: .5rem;
  width: 3rem;
  text-align: center;
  border: 2px solid currentColor;
  margin-right: 1.5rem;
}
.pagination > a:hover {
  background: var(--color-background);
  color: var(--color-text);
  border-color: var(--color-text);
}

.note-excerpt {
  line-height: 1.5em;
}
.note-excerpt header {
  margin-bottom: 1.5rem;
}
.note-excerpt figure {
  margin-bottom: .5rem;
}
.note-excerpt-title {
  font-weight: 600;
}
.note-excerpt-date {
  color: var(--color-text);
  font-family: var(--font-family-mono);
}


@font-face {
  font-family: "WhiskyCondensed";
  src: url("../font/WhiskyCondensed/fonts/WhiskyCondensed2mac.eot"); /* IE9 Compat Modes */
  src: url("../font/WhiskyCondensed/fonts/WhiskyCondensed2mac.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../font/WhiskyCondensed/fonts/WhiskyCondensed2mac.otf") format("opentype"), /* Open Type Font */
    url("../font/WhiskyCondensed/fonts/WhiskyCondensed2mac.svg") format("svg"), /* Legacy iOS */
    url("../font/WhiskyCondensed/fonts/WhiskyCondensed2mac.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../font/WhiskyCondensed/fonts/WhiskyCondensed2mac.woff") format("woff"), /* Modern Browsers */
    url("../font/WhiskyCondensed/fonts/WhiskyCondensed2mac.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Yoletine";
  src: url("../font/yoletine/fonts/YoletineRomanMac.eot"); /* IE9 Compat Modes */
  src: url("../font/yoletine/fonts/YoletineRomanMac.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../font/yoletine/fonts/YoletineRomanMac.otf") format("opentype"), /* Open Type Font */
    url("../font/yoletine/fonts/YoletineRomanMac.svg") format("svg"), /* Legacy iOS */
    url("../font/yoletine/fonts/YoletineRomanMac.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../font/yoletine/fonts/YoletineRomanMac.woff") format("woff"), /* Modern Browsers */
    url("../font/yoletine/fonts/YoletineRomanMac.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Lusty";
  src: url("../font/lusty/fonts/Typeface.eot"); /* IE9 Compat Modes */
  src: url("../font/lusty/fonts/Typeface.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../font/lusty/fonts/Typeface.otf") format("opentype"), /* Open Type Font */
    url("../font/lusty/fonts/Typeface.svg") format("svg"), /* Legacy iOS */
    url("../font/lusty/fonts/Typeface.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../font/lusty/fonts/Typeface.woff") format("woff"), /* Modern Browsers */
    url("../font/lusty/fonts/Typeface.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'LinealSans-Regular';
  src: url(../font/lineal/LinealSans-Regular.eot);
  src: url(../font/lineal/LinealSans-Regular.eot?#iefix) format('embedded-opentype'),
       url(../font/lineal/LinealSans-Regular.otf) format('otf'),
       url(../font/lineal/LinealSans-Regular.svg#LinealSans-Regular) format('svg'),
       url(../font/lineal/LinealSans-Regular.ttf) format('truetype'),
       url(../font/lineal/LinealSans-Regular.woff) format('woff'),
       url(../font/lineal/LinealSans-Regular.woff2) format('woff2');
}


@font-face {
  font-family: "Dideaux";
  src: url("../font/dideaux/Dideaux.eot"); /* IE9 Compat Modes */
  src: url("../font/dideaux/Dideaux.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../font/dideaux/Dideaux.otf") format("opentype"), /* Open Type Font */
    url("../font/dideaux/Dideaux.svg") format("svg"), /* Legacy iOS */
    url("../font/dideaux/Dideaux.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../font/dideaux/Dideaux.woff") format("woff"), /* Modern Browsers */
    url("../font/dideaux/Dideaux.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Bouclette";
  src: url("../font/bouclette/Bouclette.eot"); /* IE9 Compat Modes */
  src: url("../font/bouclette/Bouclette.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../font/bouclette/Bouclette.otf") format("opentype"), /* Open Type Font */
    url("../font/bouclette/Bouclette.svg") format("svg"), /* Legacy iOS */
    url("../font/bouclette/Bouclette.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../font/bouclette/Bouclette.woff") format("woff"), /* Modern Browsers */
    url("../font/bouclette/Bouclette.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}