@charset "UTF-8";

/*!
 * Pikaday
 * Copyright © 2014 David Bushell | BSD & MIT license | https://dbushell.com/
 */

/* styling for abbr */

/*!
 * Generated with CSS Flag Sprite generator (https://www.flag-sprites.com/)
 */

.sib-form *,
.sib-form ::after,
.sib-form ::before {
    box-sizing: border-box
}

.sib-form {
   
    margin: 0
}

.sib-form ul {
    padding: 0
}

#sib-container {
    
 
   
    display: inline-block;
    width: 100%
}

#sib-form {
    text-align: left
}

#sib-form .entry__choice label {
    display: unset
}

.checkbox.checkbox_tick_positive::before {
    left: calc(50% - 1px)
}

.entry__choice {
    width: 100%;
    margin-bottom: 3px;
  
    word-wrap: break-all;
    word-wrap: break-word
}

.entry__label {
    margin-bottom: 10px;
    width: 100%;
    font-weight: 500;
    word-break: break-word;
    word-wrap: break-word
}

.entry__label>* {
    float: left
}

.entry__label::after {
    content: attr(data-required);
    font-size: 1em;
    color: #ff4949;
    text-decoration: none;
    word-wrap: break-all;
    word-wrap: break-word;
    display: inline
}

.entry__error {
    display: none;
    margin-top: 6px;
    margin-bottom: 6px;
    background: rgba(0, 0, 0, 0)
}

.sib-form-block {
    
    word-wrap: break-word;
    outline: none
}

.sib-form-block p,
.sib-form-block ul {
    text-align: inherit;
    margin: 0;
    line-height: 1.5em
}


.sib-form-block ul {
    list-style-position: inside
}

.sib-form-block__button {
    display: inline-block;
    padding: 8px 18px;
    border: none;
    overflow-wrap: break-word;
    max-width: 100%;
    cursor: pointer;
    background-color: var(--darkgreen);
    color: var(--greenwhite);
}

.sib-form-block__button-with-loader {
    min-height: 40px;
    line-height: 23px
}

.form__label-row {
    display: flex;
    flex-direction: column;
    justify-content: stretch
}

.input {
   
}

.input--hidden {
    display: none !important
}

textarea.input {
    padding: calc(.5rem - 1px)
}

.sib-form-container a {
    text-decoration: underline;
 
}

.form__entry {
    position: static;
    margin-left: 0;
    padding-left: 0
}

.sib-form-message-panel {
    margin: 0 0 1.25rem 0;
    width: 100%;
    padding: .4375rem;
    border: 1px solid;
    display: none
}

.sib-form-message-panel__text {
    display: flex;
    align-items: center;
    margin: 0;
    padding: .5rem
}

.sib-form-message-panel__text .sib-icon {
    contain: strict;
    display: inline-block;
    fill: currentColor
}

.sib-form-message-panel__text .sib-notification__icon {
    height: 1.5em;
    width: 1.5em;
    flex-shrink: 0;
    margin-right: calc(1rem - 1px)
}

.checkbox_tick_positive:before {
    left: 49%
}

@media screen and (max-width: 500px) {
    #sib-container {
        
    }
}

.entry__choice label p {
    display: inline
}

@keyframes loader {
    0%,
    20%,
    80%,
    100% {
        transform: scale(1)
    }
    50% {
        transform: scale(1.5)
    }
}

@media screen and (max-width: 400px) {
    #sib-container {
       
    }
}

.sib-hide-loader-icon {
    display: none
}

.sib-form ::-moz-placeholder {
   
    opacity: 1
}

.sib-form ::placeholder {
   
    opacity: 1
}

.sib-form .form__entry {
    border: 0;
    margin: 0;
    padding: 0;
    position: relative
}

.sib-form .form__entry:not(:first-child) {
    margin-top: 1.5rem
}

.sib-form .entry__label+.form__entry {
    margin-top: 0
}

.sib-form .entry__label {
  
font-size: var(--step-0);
    padding: 0;
    white-space: normal
}

.sib-form .entry__field {
    align-items: center;
    background: #fff;
    display: inline-flex;
    margin: 0;
    max-width: 100%;
    border-radius: 8px;
   

}

.sib-form .entry__field.darkfield {
    align-items: center;
    background: transparent;
    border: 1px solid var(--greenflash);
    display: inline-flex;
    margin: 0;
    max-width: 100%;
    border-radius: 8px;

    color: var(--greenflash);
   

}

.darkfield > input::-moz-placeholder {  color: var(--greenflash); opacity: .8}

.darkfield > input::placeholder {  color: var(--greenflash); opacity: .8}

.sib-form .entry__field:focus-within {
    box-shadow: 0 0 0 2px #c9e1f4
}

.sib-form .input {
    background: none;
    border: 0;
    font: inherit;
    margin: 0;
    padding: 24px;
     min-height: 48px;
}

.sib-form .input:first-child {
   
}

.sib-form .input:last-child {
    
}

.sib-form .input {
    box-sizing: content-box;
    color: inherit;
    outline: 0
}

.sib-form .input:not(textarea) {
    
}

.sib-form .input {
    box-shadow: none;
    min-width: 1px;
    padding: 0;
     padding: 24px;
     min-height: auto;
}

.sib-form select.input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 286.1 167%27%3E%3Cpath d=%27M24.1 0h238c21.4 0 32.1 25.9 17 41l-119 119c-9.4 9.4-24.6 9.4-33.9 0L7.1 41C-8 25.9 2.7 0 24.1 0z%27 fill=%27%233c4858%27/%3E%3C/svg%3E");
    background-position: right .65em top 50%;
    background-repeat: no-repeat;
    background-size: .65em auto
}

.sib-form select.input:first-child,
.sib-form select.input:last-child {
    padding-right: calc(2rem - 1px)
}

.sib-form .entry__error,
.sib-form .entry__label {
    max-width: 40em
}

.sib-form .entry__error {

}

.sib-form .entry__choice+.entry__error,
.sib-form .entry__error+.entry__error {
    
}

.sib-form .entry__error {
    color: #ff4949;
    font-size: .87055056rem;
    line-height: 1rem
}

.sib-form .entry__choice {
    padding-left: 1.5em;
    text-indent: -1.5em
}

.sib-form .entry__choice .checkbox {
    margin-right: .5em
}

.sib-form .entry__choice:not(:first-child) {
    margin-top: .5rem
}

.sib-form .checkbox {
    background: #fff;
    border: 1px solid #687484;
    cursor: pointer;
    display: inline-block;
    height: 1em;
    vertical-align: -0.125em;
    width: 1em;
    position: relative
}

.sib-form .checkbox {
    border-radius: 3px
}


.sib-form .checkbox_tick_positive:before {
    transform: rotate(45deg)
}

.sib-form .checkbox_tick_positive:before {
    border-color: #fff;
    border-style: solid;
    border-width: 0 2px 2px 0;
    bottom: 1px;
    content: "";
    left: 50%;
    margin-left: -25%;
    position: absolute;
    top: 1px;
    transform-origin: 80% 45%;
    width: 50%
}

.sib-form .input_replaced {
    opacity: 0;
    position: absolute;
    z-index: -1
}

.sib-form .input_replaced:checked+.checkbox_tick_positive {
    background: #13ce66;
    border-color: #13ce66
}

.sib-form .input_replaced:indeterminate+.checkbox {
    background: #fff;
    border-color: #687484
}

.sib-form .input_replaced:indeterminate+.checkbox:before {
    background: #687484;
    border: 0;
    content: "";
    height: 2px;
    left: 2px;
    margin: -1px 0 0;
    position: absolute;
    right: 2px;
    transform: none;
    top: 50%;
    width: auto
}

.sib-form .input_replaced:indeterminate+.checkbox:after {
    content: normal
}

.sib-form .input_replaced:active+.checkbox,
.sib-form .input_replaced:focus+.checkbox {
    box-shadow: 0 0 0 2px #c9e1f4
}

.sib-form ::-ms-reveal {
    display: none
}

.sib-form ::-webkit-inner-spin-button,
.sib-form ::-webkit-search-decoration {
    display: none
}

.sib-form .menu {
    background: #fff;
    border: 1px solid #c0ccda;
    border-radius: 3px;
    list-style: none;
    margin: 0;
    max-width: 100vw;
    min-width: 100%;
    padding: calc(.5rem - 1px) 0
}

.sib-form .clickable__icon {
    height: 1.5rem;
    vertical-align: bottom;
    width: 1.5rem
}

.sib-form .clickable__icon:not(.sib-icon_standalone) {
    margin-right: calc(.7002rem - 1px)
}

.sib-form .progress-indicator__icon {
    animation: indicator-spin 1.3s cubic-bezier(0.46, 0.35, 0.39, 0.85) infinite
}

@keyframes indicator-spin {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(1turn)
    }
}

.note {
  max-width: 35rem;
  margin: 0 auto;
}

#container-note{
/* padding:2vw 10vw 0 10vw ; */



}

#content-note{
  /* padding:2vw 10vw 0 10vw ; */
  position:relative;
  z-index:1;

  width: 50vw;
  min-width: 450px;
   max-width: 780px;
    margin: auto;
  display: flex;
  flex-direction: column;
  grid-gap: var(--regularspacing);
  }

h1.notes {
    margin-block-end: 32px;
    color: var(--greenwhite);
}

#content-note a{color: var(--darkgreen);text-decoration: underline;}

#content-note p,#content-note ul{
  /* padding:2vw 10vw 0 10vw ; */
  position:relative;
  z-index:1;

  width: 50vw;
  min-width: 450px;
  max-width: 780px;
    margin: auto;
   color: var(--darkgreen80);
  
  }

#content-note ul{
list-style: disc;
 }

#footnote{
position: relative;
z-index: 1;
width: 50vw;
min-width: 450px;
 max-width: 780px;
margin: auto;
padding-top: 64px;
padding-bottom: 32px;



}

#footnote p{

font-size:14px;
line-height:140%;
letter-spacing:-.006em

  
  
  }

#footnote a{
  color: var(--black);

}

#content-note p, ul{

   margin-bottom:16px;
    }

#content-note h2{

  text-align: left;
  margin-top: 80px;
 margin-bottom: 16px;
  
  color:var(--darkgrey)
 
  }

.datasnote.category {
    
    margin-bottom:40px;
  
  color:var(--black);
  z-index: 9999;
  background-color: #ffffff40;
  font-size:0.75rem;
  padding: 10px  20px;
  border-radius: 12px;
  }

/* .h1article{
  position: sticky;


top: 0;
} */

#time-note{

   
  margin-top: 0;
    text-align:center;
    font-size: 0.75rem;
    transform: translateY(32px);

display: flex;
flex-direction: column;
align-items: center;
    min-width: 450px;
max-width: 780px;
margin: 0 auto;
  
    }

.time{
     transform: translateY(32px);
    }

#intro-project{width:100%; margin-top:0}

article  p > strong {
  color: var(--darkgreen);
  background-color: white;
}

article  li > strong {
  color: var(--darkgreen);
  background-color: white;
}

.siblingnotes a{

  text-decoration:none;
  /* display: block; */
  width:100%;
  }

/* 
.siblingnotes h3{

    text-decoration:none;
    float:left;
    text-align: left;
    } */

footer{
  width: 100%;

 }

.prevnext {

  width:100%;
 }

@media screen and (max-width: 991px) {

 article{
 
 }
  .datasnote.category {
    margin-bottom: 40px;
    color: var(--black);
    z-index: 9999;
  padding:0;
    font-size: 0.75rem;
   background-color: transparent;
    margin-left:calc(10% - 10px);
}



  .h1article{
   
    font-size: 4rem;
    /* width: 90VW; */
  
    text-align: left;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
  }


  #footnote {



    position: relative;
z-index: 1;
width: 80%;
min-width: unset;
max-width: unset;
margin: auto;
text-align: left;
margin-top: 40px;

margin-bottom: 80px;
    }

  .notes .h1-boogy {
    font-size: 16vw;
    float: none;
    text-align: left;

}
#content-note p, #content-note h2, #content-note ul {
  margin: var(--largespacing) 0 0 0;
  position: relative;
  z-index: 1;
  width: auto;
  min-width: unset;
  max-width: unset;
  margin: auto;
  text-align:left;


}

#content-note h2 {
  margin-top: 48px;
   margin-bottom: 16px;
}

#content-note{
  width:auto;
  min-width: auto;
  max-width: none;
}


#time-note{
  width:auto;
  min-width: auto;
  max-width: none;
  margin-bottom: 32px;
   margin-top: 32px;

   font-size: 1rem;
}


#content-note {

font-size: 1.2rem;
line-height: 1.5rem;
letter-spacing: -.025rem;
}

 }

*, ::before, ::after{
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  
}

::backdrop{
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  
}

/*! tailwindcss v3.4.14 | MIT License | https://tailwindcss.com
 */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
  font-size:var(--step-0);
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
h1,
h2,
h3,
hr,
figure,
p {
  margin: 0;
}


ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

.container{
    width: 100%
}

@media (min-width: 380px){

    .container{
        max-width: 380px
    }
}

@media (min-width: 640px){

    .container{
        max-width: 640px
    }
}

@media (min-width: 768px){

    .container{
        max-width: 768px
    }
}

@media (min-width: 1024px){

    .container{
        max-width: 1024px
    }
}

@media (min-width: 1280px){

    .container{
        max-width: 1280px
    }
}

@media (min-width: 1480px){

    .container{
        max-width: 1480px
    }
}

.sr-only{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0
}

.visible{
    visibility: visible
}

.static{
    position: static
}

.fixed{
    position: fixed
}

.absolute{
    position: absolute
}

.relative{
    position: relative
}

.inset-0{
    inset: 0px
}

.-bottom-20{
    bottom: -5rem
}

.bottom-0{
    bottom: 0px
}

.top-0{
    top: 0px
}

.top-1\/2{
    top: 50%
}

.z-10{
    z-index: 10
}

.z-20{
    z-index: 20
}

.m-auto{
    margin: auto
}

.my-32{
    margin-top: 8rem;
    margin-bottom: 8rem
}

.\!mt-0{
    margin-top: 0px !important
}

.-mt-10{
    margin-top: -2.5rem
}

.-mt-16{
    margin-top: -4rem
}

.mb-2{
    margin-bottom: 0.5rem
}

.mb-4{
    margin-bottom: 1rem
}

.mb-48{
    margin-bottom: 12rem
}

.mb-8{
    margin-bottom: 2rem
}

.mt-0{
    margin-top: 0px
}

.mt-16{
    margin-top: 4rem
}

.mt-2{
    margin-top: 0.5rem
}

.mt-32{
    margin-top: 8rem
}

.mt-4{
    margin-top: 1rem
}

.mt-64{
    margin-top: 16rem
}

.mt-8{
    margin-top: 2rem
}

.block{
    display: block
}

.inline-block{
    display: inline-block
}

.inline{
    display: inline
}

.flex{
    display: flex
}

.table{
    display: table
}

.grid{
    display: grid
}

.contents{
    display: contents
}

.hidden{
    display: none
}

.aspect-square{
    aspect-ratio: 1 / 1
}

.h-auto{
    height: auto
}

.h-full{
    height: 100%
}

.min-h-128{
    min-height: 32rem
}

.w-1\/2{
    width: 50%
}

.w-2\/3{
    width: 66.666667%
}

.w-3\/4{
    width: 75%
}

.w-full{
    width: 100%
}

.min-w-64{
    min-width: 16rem
}

.max-w-2xl{
    max-width: 42rem
}

.max-w-screen-md{
    max-width: 768px
}

.-translate-y-1\/2{
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.-translate-y-3\/4{
    --tw-translate-y: -75%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.-scale-x-100{
    --tw-scale-x: -1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.transform{
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.resize{
    resize: both
}

.flex-row{
    flex-direction: row
}

.flex-col{
    flex-direction: column
}

.items-start{
    align-items: flex-start
}

.items-end{
    align-items: flex-end
}

.items-center{
    align-items: center
}

.\!justify-start{
    justify-content: flex-start !important
}

.justify-end{
    justify-content: flex-end
}

.justify-center{
    justify-content: center
}

.justify-between{
    justify-content: space-between
}

.\!gap-2{
    gap: 0.5rem !important
}

.gap-1{
    gap: 0.25rem
}

.gap-2{
    gap: 0.5rem
}

.gap-4{
    gap: 1rem
}

.gap-8{
    gap: 2rem
}

.overflow-hidden{
    overflow: hidden
}

.rounded-full{
    border-radius: 9999px
}

.rounded-lg{
    border-radius: 0.5rem
}

.rounded-md{
    border-radius: 0.375rem
}

.rounded-none{
    border-radius: 0px
}

.rounded-xl{
    border-radius: 0.75rem
}

.border{
    border-width: 1px
}

.bg-white{
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}

.p-2{
    padding: 0.5rem
}

.p-4{
    padding: 1rem
}

.p-8{
    padding: 2rem
}

.px-16{
    padding-left: 4rem;
    padding-right: 4rem
}

.px-4{
    padding-left: 1rem;
    padding-right: 1rem
}

.px-8{
    padding-left: 2rem;
    padding-right: 2rem
}

.py-16{
    padding-top: 4rem;
    padding-bottom: 4rem
}

.py-32{
    padding-top: 8rem;
    padding-bottom: 8rem
}

.py-4{
    padding-top: 1rem;
    padding-bottom: 1rem
}

.py-8{
    padding-top: 2rem;
    padding-bottom: 2rem
}

.pb-16{
    padding-bottom: 4rem
}

.pb-32{
    padding-bottom: 8rem
}

.pb-8{
    padding-bottom: 2rem
}

.pt-32{
    padding-top: 8rem
}

.pt-48{
    padding-top: 12rem
}

.pt-64{
    padding-top: 16rem
}

.pt-8{
    padding-top: 2rem
}

.pt-80{
    padding-top: 20rem
}

.text-left{
    text-align: left
}

.text-center{
    text-align: center
}

.align-bottom{
    vertical-align: bottom
}

.text-2xl{
    font-size: var(--step-5)
}

.text-base{
    font-size: var(--step-0)
}

.text-lg{
    font-size: var(--step-3)
}

.text-m{
    font-size: var(--step-1)
}

.text-ml{
    font-size: var(--step-2)
}

.text-sm{
    font-size: var(--step--1)
}

.text-xs{
    font-size: var(--step--2)
}

.uppercase{
    text-transform: uppercase
}

.capitalize{
    text-transform: capitalize
}

.leading-extratight{
    line-height: 1.125
}

.leading-none{
    line-height: 1
}

.leading-tight{
    line-height: 1.25
}

.tracking-normal{
    letter-spacing: 0em
}

.tracking-tight{
    letter-spacing: -0.025em
}

.tracking-wide{
    letter-spacing: 0.025em
}

.underline{
    text-decoration-line: underline
}

.opacity-75{
    opacity: 0.75
}

.opacity-80{
    opacity: 0.8
}

.shadow-gray-400{
    --tw-shadow-color: #9ca3af;
    --tw-shadow: var(--tw-shadow-colored)
}

.drop-shadow-2xl{
    --tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

:root {
--primary-color:#00F;
--headingfont:BoogyBrutPoster,TimesNewRoman,serif;
--bodyfont:UntitledSans,Inter,sans-serif;
--darkgreen:rgba(0, 51, 41, 1);;
--darkgreen80:rgba(0, 51, 41, 0.65);;
--lightgreentext:rgba(5,45,35,.8);
--superlightgreentext:rgba(5,45,35,.6);
--white:#FFF;
--greenwhite: #ebf0ef;
--greenflash: #E6FFA3;
--smallspacing: 0.5rem;
--regularspacing: 1rem;
--mediumspacing: 1.5rem;
--largespacing: 2rem;
--extralargespacing: 4rem;
--megaspacing:5rem;
--gridgap: 8px;
--columnsizehp: 512px;
--reducedcolumnsizehp: 90%;


 
  --step--3: clamp(0.7rem, 0.7rem + 0.1258vw, 0.7834rem);
  --step--2: clamp(0.7813rem, 0.7511rem + 0.151vw, 0.8681rem);
  --step--1: clamp(0.9375rem, 0.9013rem + 0.1812vw, 1.0417rem);
  --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  --step-1: clamp(1.35rem, 1.2978rem + 0.2609vw, 1.5rem);
  --step-2: clamp(1.62rem, 1.5574rem + 0.313vw, 1.8rem);
  --step-3: clamp(1.944rem, 1.8689rem + 0.3757vw, 2.16rem);
  --step-4: clamp(2.3328rem, 2.2426rem + 0.4508vw, 2.592rem);
  --step-5: clamp(2.7994rem, 2.6912rem + 0.5409vw, 3.1104rem);
  --step-6: clamp(3.3592rem, 3.2294rem + 0.6491vw, 3.7325rem);
  --step-7: clamp(4.0311rem, 3.8753rem + 0.779vw, 4.479rem);


}

.darkgreen {
color:var(--darkgreen)
}

.darkgreen80 {
color:var(--darkgreen80)
}

.lightgreen {
color:var(--lightgreentext)
}

.white {
color:var(--white)
}

.greenflash {
color:var(--greenflash)
}

.opacity80 {
opacity:.8
}

.opacity30 {
opacity:.3
}

.underline{
  text-decoration: underline;
  text-underline-offset:2px;
}

html {
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
font-family:sans-serif;
background-color:var(--greenwhite);
font-family: var(--bodyfont);
height:100%;
font-size:var(--step--2);
}

body{
margin:0;
  padding: 0;
}

#main-content {
min-height: 100%;
    margin: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;

}

p {line-height: 160%; color: var(--darkgreen80)}

/* p > strong {background-color: var(--greenwhite); font-style: normal;color: var(--darkgreen)} */

* {
box-sizing:border-box
}

.body, .wrapper{
background-color:transparent;
flex-flow:column wrap;



max-width: 1440px;
width:90%;
display:flex;
margin-right:auto;
margin-left:auto;
}

.body-4xl{
font-size:var(--step-7);
line-height:95%;
letter-spacing:-.28rem
}

.body-3xl{
font-size:var(--step-6);
line-height:100%;
letter-spacing:-.22rem
}

.body-xxl{
font-size:var(--step-5);
line-height:100%;
letter-spacing:-.16rem

}

.body-xl{
font-size:var(--step-4);
line-height:110%;
letter-spacing:-.1rem
}

.body-l{
font-size:var(--step-3);
line-height:2.4rem;
letter-spacing:-.032rem
}

.body-xm{
font-size:var(--step-2);
line-height:2rem;
letter-spacing:-.05rem
}

.body-m{
font-size:var(--step-1);
line-height:2rem;
letter-spacing:-.019rem
}

.body-base{
font-size: var(--step-0);
 line-height:140%;
letter-spacing:-.025rem;
}

.body-s{
font-size: var(--step--1);
line-height:140%;
letter-spacing:-.017rem
}

.body-xs{
font-size:var(--step--2);
line-height:1.4rem;
letter-spacing:0rem
}

.body-xxs{
font-size:var(--step--3);
line-height:1.2rem;
letter-spacing:0rem;
}

.body-3xs{
font-size:0.875rem;
line-height:1rem;
letter-spacing:0rem
}

.body-4xs{
font-size:0.75rem;
line-height:0.9rem;
letter-spacing:0rem
}

.fullopacity > p{
  color: var(--darkgreen) !important ;
}

.fullopacity {
   color: var(--darkgreen) ;
}

figure {
  margin: 0;
}

a {
    color: unset;
}

strong {
font-weight:400;
opacity: 1;
}

li {
  list-style-position: inside;
}

h1 {

text-align:center;

font-family:var(--bodyfont);
font-size:var(--step-7);
font-weight:400;
line-height:90%;
letter-spacing: -4px;
margin: 0;
/*margin-top: var(--largespacing);*/
}

h1 > strong {
font-size:1.1em;
font-style:italic;
font-family:var(--headingfont);
text-transform:none;
letter-spacing: 0;
background: transparent;
}

h2 {

font-size:var(--step-5);
line-height:100%;
letter-spacing:-.16rem;
font-weight: 400;
margin:0;

}

h2 > strong {
font-size:1.2em;
font-style:italic;
font-family:var(--headingfont);
text-transform:none;
letter-spacing: 0;
}

h3 > strong {
  font-size: 1.3em;
  font-style: italic;
  font-family: var(--headingfont);
  text-transform: none;
  letter-spacing: 1px;
  margin-left: 0.05em;
}

h4 > strong {
  font-size: 1.3em;
  font-style: italic;
  font-family: var(--headingfont);
  text-transform: none;
  letter-spacing: 1px;
  margin-left: 0.025em;
}

.h2extra {
font-family:var(--headingfont);
font-size: 7em;
font-weight: 400;
line-height: 78%;
letter-spacing:-0.1rem;
margin: 0;
text-transform: uppercase;
}

h2 > strong {

font-style:italic;
text-transform:none;

}

h3 {

 font-size:var(--step-3);
line-height:110%;
letter-spacing:-.12rem;
font-weight: 400;
margin: 0;
}

h4 {

  font-size:var(--step-1);
  line-height:110%;
letter-spacing: -.025rem;
font-weight: 400;
margin: 0;
}

strong {

  text-transform: none;
}

/*FADE IN HP */

.body, header {
            animation: fadeInAnimation ease-in 500ms;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;

        }

@keyframes fadeInAnimation {
            0% {
                opacity: 0;
            }
  50% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

img {
max-width:100%;
vertical-align:middle;
display:inline-block;
height: auto;
}

p {
margin: 0;

}
.block p {
font-size: var(--step-0);

}




blockquote {

margin:0;
padding:64px;

border-style: none;
margin:auto;
height: 100%;
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;


}

blockquote > footer{

display: flex;
flex-direction: row;
-moz-column-gap:  var(--regularspacing);
     column-gap:  var(--regularspacing);
row-gap:  var(--regularspacing);
margin-top:  var(--regularspacing);
align-items:center;



}

input, textarea, select{
  font-family: var(--bodyfont);
border:0;
border-radius: 8px;
min-height: 48px;
width: 100%;
padding: 24px;
color:var(--lightgreentext);


line-height:140%;
letter-spacing:-.017em;
}

input[type=submit]{
border: none;
min-height: 48px;
width:auto;
color:white;
background-color: var(--darkgreen);
padding: 8px var(--regularspacing);
font-size:20px;
line-height:140%;
letter-spacing:-.017em;
border-radius: 600px;
}

select{
background: white;
padding-left: 24px;
font-size:20px;
line-height:140%;
letter-spacing:-.015em;
color:var(--lightgreentext);
}

input:focus, textarea:focus, select:focus {
color:var(--darkgreen);


box-shadow: 0px 2px 3px rgba(5, 45, 35, 0.03),
  0px 8px 12px rgba(5, 45, 35, 0.06),
  0px 19px 28px rgba(5, 45, 35, 0.09);

border:0;
}

input:focus-visible {


outline: 0;
border:0;
}

input::-moz-placeholder, textarea::-moz-placeholder {
    font-size:20px;
line-height:140%;
letter-spacing:-.015em;
opacity: 1;
color:var(--darkgreen);

}

input::placeholder, textarea::placeholder {
    font-size:20px;
line-height:140%;
letter-spacing:-.015em;
opacity: 1;
color:var(--darkgreen);

}

select {


 -webkit-appearance: none;


    -moz-appearance: none;


         appearance: none;

 background-image: url("../../assets/images/selectarrow.svg");
  background-repeat: no-repeat;
  background-position: right var(--largespacing) top 50%;
  background-size: 14px auto;

  }

.alert.success {
  background: white;
  padding: 80px;
  border-radius: 16px;
  margin-top: 32px;
}

textarea{

  height: 200px;
}

form{ display: flex;
  flex-direction: column;
  row-gap: 16px;




}

ul {
margin: 0;}

.field{

  display: flex;
  flex-direction: column;
  row-gap: 8px;

}

.hanging-punctuation{
  margin-left: -1.2rem;
position: absolute;
}

.body-xs > .hanging-punctuation{
  margin-left: -12px;

}

.nameandposition {
  display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  
}

.profilepic-quote{

border-radius: 600px;
overflow: hidden;
width: 64px;

}

.profilepic-quote > picture > img{

height:100%;
width:100%;

}

.homepage {
grid-column-gap:28px;
grid-row-gap:28px;
background-color:#ebf0ef;
flex-direction:column;
justify-content:flex-start;
align-items:center;
padding-top:35px;
padding-bottom:35px;
display:flex;
position:relative
}

.pageintro > p > strong{
color: var(--darkgreen);
background-color: var(--greenflash);
}

.buttons-homepage{

display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start
}

.logosvg{

 position: fixed;
 
    z-index: 2;
  
    top: calc(50% - var(--regularspacing));
        
        width:60px;
}

#logohey{

width:80px;


}

#logolow{

width:65px;

transform: translateX(-30px);
}

.logosvg.logogreen > path {
  
  fill: var(--darkgreen);
}

header{ position: absolute; }

body > footer{
  position: relative; bottom:0;  margin-top: 80px; display: flex; flex-direction: column; justify-content: space-between; padding: 32px 0 ;padding-top: 64px}

.bottom-footer, .end-footer {
  width: 100%;
}

#headernav{

   transition: background-color 0.5s ease;

  width: -moz-fit-content;

  width: fit-content;
  
 
  width:100%;
  height:60px;
z-index: 3;
display: flex;

 
}

.headeranim {
  animation-name:backgroundmenu;
  animation-duration:250ms;
  animation-timing-function:ease-out;
  animation-iteration-count:1;
    animation-fill-mode: forwards;

    

  }

@keyframes backgroundmenu {
  0% {
  opacity: 0;


  }
  
  100% {
  
   opacity: 1;
  }
  }

.nav-toggle-exit{display: none}

@keyframes logoanim {
  0% {
  opacity: 0;
 

  }
  
  100% {
  
   opacity: 1;
  }
  }

.titlepopup{

font-family: var(--headingfont);
font-size: 4em;
}

.menu {

max-width:none;
grid-column-gap: var(--regularspacing);
grid-row-gap: var(--regularspacing);
justify-content:center;
align-items:center;
margin-left:auto;
margin-right:auto;
display:flex;
position:fixed;

bottom:auto;
left:0;
right:0;
z-index: 2;
height: 64px;


}

.singleitemmenu {
text-decoration: none;
color: var(--darkgreen);
 cursor: url("../images/plus-circle-v3.svg"), auto;

border-radius: 8px;


}

.mainctamenu{
  background-color: var(--greenwhite);
}

.tooltip {
  position: absolute;
  display: inline-block;
  bottom: -1.5em;
  left: 50%;
  right:50%;
  
}

.tooltip:hover {
 cursor: help;
  
}

.tooltip .tooltiptext {
  visibility: hidden;
  max-width: 500px;
  background-color: var(--darkgreen);
  color: var(--greenwhite);
  text-align: left;
  border-radius: 6px;
padding: var(--largespacing);
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -180px;
margin-top: 8px;
height: auto;
width: 360px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;

}

.firstblocstatsfooter{
  
  position: relative;
  grid-row: 1 / span 2;
      min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
        align-items: center;
}

.secondblocstatsfooter{
  
display: flex;
    flex-direction: column;
    justify-content: flex-start;
        height: 100%;
        grid-gap: var(--smallspacing);
        position: relative;
}

.statswithicons{
  
  display: flex;
  flex-direction: row;
  grid-gap: var(--smallspacing);
  margin:0 auto;

    justify-content: center;
        align-items: flex-end;
}

.pagestats{

  height:100px;
}

.pagestatsbloctwo{

  height:100px;
}

.ecograder{
  

  height:75px;
   width:120px;
   display: flex;
   align-items: center;
   flex-direction: column;
   justify-content: center;
       margin: 0 auto;


         border-top-left-radius: 110px;
    border-top-right-radius: 110px;
   border: 8px dotted #32C454;
    border-bottom: 0;
    padding-top: 32px;
}

.doubleecograder{height:180px;
   width:280px;
   border: 16px dotted #32C454;
display: flex;
   align-items: center;
   flex-direction: column;
   justify-content: center;
       margin: 0 auto;
  border-top-left-radius: 260px;
    border-top-right-radius: 260px;
   border-bottom: 0;
    padding-top: 96px;}

.ecograderdetails{

display: flex;
    flex-direction: column;
    justify-content: flex-start;
     
        grid-gap: var(--smallspacing);
        text-align: center;

}

.ecograderinfos{

width:80%;
margin:auto;
        text-align: center;

}

.firstblocstatsfooter.environmentaldeclarationversion  {
transform: scale(2);
 transform-origin: bottom center;
 padding-top: 90px;
}

.environmentaldeclarationversion.mb{transform: scale(1.2);}

.statswithicons.environmentaldeclarationversion  {
transform: scale(1.5);
}

#ecodesingleveltable, #energyintensivetable{

  --color:  var(--greenwhite);
  height: 400px;
  max-width: 800px;
  


}

#ecodesingleveltable{

  --color:  var(--greenwhite);
  height: 350px;
  max-width: 800px;

--labels-size: 150px;

text-align: left;

}

#timeenergy{

  --color:  var(--greenwhite);
  height: 400px;
  max-width: 800px;



}

#breakdown{

  --color: var(--greenwhite);
  height: 600px;
  max-width: 800px;

margin-bottom: 64px;

}

#mb{

  --color:  var(--greenwhite);
  height: 300px;
  max-width: 800px;



}

#energyintensivetable.column, #mb.column {

}

#energyintensivetable td{
margin-bottom: 32px ;
}

#energyintensivetable th{
font-size: 14px;
}

.charts-css.bar:not(.reverse) tbody tr th {
  left: -10px !important;
 
}

table{
  
margin-bottom: 32px !important;
}

/*table{
  
  border-collapse: collapse;
}


table, th, td {
  border: 1px solid;
}

th, td {
  padding:8px;
}*/

td {
  font-size:11px;
  line-height: 200%;
letter-spacing:0.5px;
  color: rgba(0, 51, 41);
  font-weight:bold;
}

.nametd {
  background-color: white;

  border-radius: 4px;

  line-height: 100%;

  padding: 8px;

  margin-top: 8px;

}

.nametd.ecoscore {
 

  margin-top: 0px;
margin-right: 8px;
}

.singleitemmenu:hover {
opacity: 0.5;
}

.singleitemmenu.active {

border-bottom: 1px solid var(--darkgreen);
padding-bottom: 2px;
}

.text {

text-transform:uppercase;
font-family:UntitledSans,sans-serif;
font-size:11px;
font-weight:400
}

.bloc-content {
      display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: var(--gridgap);
    width:100%;
   
}

.container-content {
      display: flex;
   flex-direction: column;
    grid-gap: var(--gridgap);
    width:100%;

   
}

.container-content .block, .container-content .blocks{
  
      display: flex;
   flex-direction: column;
    grid-gap: var(--gridgap);
   
    height: auto;
   
}

.container-content figure{
  
      margin:0;
   
}

.bloc-content.join {
      background-color: white;
       border-radius:  8px;
       overflow: hidden;
       padding: 2.5rem;
grid-gap: var(--extralargespacing);
   
}

.singlecolumn {grid-gap: 0 !important;}

.block-type-card figure {border-radius: 8px;
  overflow: hidden;}

  .block-type-lighter {
    height: auto !important;
}

.join .block {
  max-width: none !important;
  width:100% !important;
  min-width: auto !important;}

.bloc-content.join > .columnblock > .blocks {
     
       padding: 0;

   
}

.centerelements{
  text-align: center
}

.transparentbackground > div  {
    
    background-color:transparent;
border-radius: 0;
overflow: visible;
}

.transparentbackground > div > div {overflow: visible !important;}

.whitebackground > div  {
    
    background-color:white;

}

.columnblock {
    
    border-radius:  8px;
    
    width: 100%;
    display: flex;
    align-content: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    overflow: hidden;
}

.columnblock > .blocks {
 
    width: 100%;
    margin:0;
    padding: 3rem;
    display: flex;
    align-content: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    overflow: hidden;
    grid-gap:var(--gridgap);
    
}

.nopadding{padding: 0 !important}

.cardblock {
 
   
    padding: 0 !important;
    
}

.cardblock .columnblock  {
 
   
     padding: var(--extralargespacing);
    
}

.blockoverflowon, .columnblock > .blocks.blockoverflowon{overflow: visible;align-content:center;justify-content: center;}

.columnblock > .quoteblock{
 
   height: 100%;
    padding:0px;
}

.columnblock > .soloimage {
   max-width: none;
    width: 100%;
    margin:auto;
    padding:0;
    height: 100%;
}

.blocks.cta {
  padding: 0;
}

.soloimage > .block >  figure {
   max-width: none;
    width: 100%;
    margin:0;
    padding:0;
    height: 100%;
}

.soloimage > .block >  figure > picture > img {
   max-width: none;
    
    margin:0;
    padding:0;
    -o-object-fit: cover;
       object-fit: cover;
    height: auto;
    width: 100%;
    height: 100%;
}

#content-casestudy {
    display: flex;
    flex-direction: column;
    row-gap: var(--gridgap);
      width: 100%;
      

}

.default .block p {
   color: var(--darkgreen80);
   opacity: 1;
   font-size: unset;
   line-height: unset;
   letter-spacing: unset;

}

.default .block p > strong {
    color: var(--darkgreen);
    background-color: var(--greenflash);
}

.toggle summary {

  font-size: 2rem;
line-height: 110%;
letter-spacing: -.12rem;
font-weight: 400;
margin: 0;
}

.toggle p {

  margin-top: 16px;
}

.block {height: 100%}


.quotelogos{

background-color: white;
border-radius:  var(--regularspacing);
width:100%;
margin: 160px 0;
padding:var(--extralargespacing);
display: flex;
flex-direction: column;
grid-gap: 64px;
}

#quote{


margin: 160px 0;
    display: grid;
    grid-gap:  var(--regularspacing);
    align-items: center;
    justify-content: space-between;
    grid-template-columns: 1fr 1fr;
    width: 100%;


}

#quote > blockquote{

margin:auto;

background-color: white;
border-radius:  var(--regularspacing);
padding: var(--extralargespacing);
text-align:left;
align-items: flex-start;
}

.projects {
width:100%;
max-width:none;

flex-direction:column;
justify-content:flex-start;
align-items:flex-start;
padding-left:0;
padding-right:0;

display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: var(--gridgap);
}

.tags{

  display: flex;
  flex-direction: row;
  grid-gap:  var(--regularspacing);
  padding: 0;
}

.tags > li{
list-style-type: none;

text-decoration: none;
    height:auto;
    display: flex;
}

.tags > li > a{
text-decoration: none;
background-color: var(--greenwhite);
padding: 12px 12px;
border-radius: 8px;

color: var(--darkgreen);
}

.tags > li > a.active{

color: white;
background-color: var(--darkgreen);

}

.tagsnotes{


width: calc(100% + 64px);
padding-right: var(--largespacing);
padding-left: var(--largespacing);
display: flex;
align-items: center;
justify-content: center;

}

.bloglist.article > .blogpost {

  border-top: 0;
  padding-top: ;
}

.tagssection{

  margin-top: 80px;
    margin-bottom: 32px;
}

.project > a:hover {




box-shadow: 0px 1px 10px rgba(3, 7, 18, 0.02),
  0px 4px 40px rgba(3, 7, 18, 0.03),
  0px 10px 91px rgba(3, 7, 18, 0.05);



border-radius: 8px;
outline: 1px solid #F2F0EF;
}

.project > a:hover > .project-card > .imageprojectbloc {

padding: 0;

}

.project > a:hover > .project-card > .imageprojectbloc > .screenshot-project-bloc {



transform: translateY(.5rem) scale(0.99);
}

.backgroundproject > picture > img {

width:100%;
height: 100%;
-o-object-fit:cover;
   object-fit:cover;

}

.screenshot-project> picture > img {

width:100%;
height: 100%;
-o-object-fit: cover;
   object-fit: cover;
-o-object-position: 50% 0%;
   object-position: 50% 0%;

}

.screenshot-project-bloc> picture > img {

height: 100%;
-o-object-fit: cover;
   object-fit: cover;
width: 100%;
-o-object-position: 50% 0%;
   object-position: 50% 0%;
border-radius: 4px 4px 0 0;
}

.linkproject{

border:none;
background-color: white;
padding:64px;
border-radius:  var(--regularspacing);
text-decoration: none;
display: flex;
}

.linkproject > a{

text-align: left; 
text-decoration: none;
color: unset;
}

#nextprojects{


  display: flex;
  flex-direction: column;
  padding-top:64px;
  grid-gap:  var(--regularspacing);
}

summary::-webkit-details-marker {
    display: none
}

details summary::marker {
     
    display: none;
 }

details summary::after {
     content: "+";
     font-size: 18px;

 }

details[open] summary::after {
     content: "-";
     font-size: 18px;
 }

details {cursor: pointer; width:100%;
}

summary{list-style: none; display: flex; justify-content: space-between; width: 100%}

.infosproject {

  text-align:center;
  margin-bottom: 8px;
  text-transform: uppercase;

  }

.project {
width:100%;
grid-column-gap:var(--largespacing);
grid-row-gap:var(--largespacing);
justify-content:flex-start;
align-items:flex-start;
display:flex;

}

.projects >  .project {

height: 100%;
}

.project > a{
text-decoration: none;
height: 100%;
    width: 100%;

  cursor: url("../images/plus-circle-v3.svg"), auto;
}

.linkexternal{cursor: url("../images/external.svg"), auto !important;}

.project-card {
width:100%;
grid-column-gap:0;
grid-row-gap:0;
border-radius: var(--regularspacing);
flex-direction:column;
justify-content:flex-start;
align-items:flex-start;
display:flex;
border-radius: 8px;
overflow: hidden;
background-color: white;
  height: 100%;
  position: relative;
}

.imageproject {
width:100%;
height:80vh;
min-height:0;
background-color:#fff;

background-repeat:no-repeat;
background-size:cover;
border-radius: var(--regularspacing);

padding:var(--extralargespacing) 0 0;
position: relative;
overflow: hidden;
}

.imageprojectbloc {
width:100%;
height:25vw;
min-height:0;
background-color:#fff;
background-repeat:no-repeat;
background-size:cover;
position: relative;
overflow: hidden;
transition: all 100ms ease-in-out;
max-height: 530px;
}

.backgroundproject {
position: absolute;
top: 0;
width:100%;
z-index:0;
height: 100%;
}

.info-project {
width:100%;

grid-gap:var(--largespacing);

background-color:#fff;


align-items:flex-start;
padding:  var(--largespacing);

display:flex;
flex-direction: row;
position: relative;
justify-content: space-between;
flex-grow: 1;
}

.specs-project{


  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 0.875rem;
  gap:0;
}

.carbonrating{z-index:2}

.speedindex{margin-top: -4px; z-index:1}

.item-specs-project{

position: relative;
  display: flex;
  flex-direction: row;
   align-items: center;
   gap:.5rem;
   width: 100%;
    justify-content: flex-end;
    color: var(--superlightgreentext);
}

.projecttitlebloc{

 
  line-height: 160%;
  
}

.carbonrating-project, .speedindex-project{
 width:40px;
 height:40px;
border-radius: 999999px;
text-transform: capitalize;
display: flex;
  align-items: center;
  justify-content: center;
  color: var(--darkgreen);
}

.speedindex-project{

 
  background-color: var(--greenwhite);;
}

.carbon-aplus{
background-color: #00FFBC ;


}

.carbon-a{
background-color: #62FF72 ;


}

.carbon-b{
background-color: #9BFF48 ;


}

.carbon-c{
background-color: #DAFF18 ;


}

.bloctitleinfo{
width: 70%;
grid-gap:var(--smallspacing);
display:flex;
flex-direction: column;
justify-content:space-between ;
height: 100%;
}

.quotebloc {

grid-column-gap:10px;
grid-row-gap:10px;
flex-direction:column;
justify-content:flex-start;
align-items:flex-start;

display:flex;
position:relative;

}

.quotehomepage{
  background-color: var(--greenwhite);
}

.quote {

grid-column-gap:var(--regularspacing);
grid-row-gap:var(--regularspacing);

border-left-width:3px;
flex-direction:column;
justify-content:flex-start;
align-items:flex-start;
margin-left:auto;
margin-right:auto;
padding: 0;

display:flex;
position:relative;
text-align: left;
}

.coverhome{
  width: 80%;
}

@media screen and (min-width: 590px) {
 .coverhome{
  width: calc(8 * clamp(4.0311rem, 3.36rem + 3.3555vw, 5.9605rem));
}
}

@media screen and (max-height: 600px) {
 .textherohomepage{
 transform: translateY(90px) !important;
}
}

.ellipse-126 {
-o-object-fit:cover;
   object-fit:cover;
background-color:#d9d9d9;
border-radius:9000px
}

.practice {
width:100%;
max-width:none;
grid-column-gap:var(--regularspacing);
grid-row-gap:var(--regularspacing);
background-color:var(--darkgreen);
border-radius:var(--regularspacing);
flex-direction:column;
justify-content:flex-start;
align-items:flex-start;
padding:var(--extralargespacing) var(--extralargespacing) 143px var(--extralargespacing);
display:flex;
position: sticky;
top: 10%;
border-bottom:1px solid #ebf0ef;
border-bottom-left-radius: var(--largespacing);
border-bottom-right-radius: var(--largespacing);
}

.blocsabout {
  width: 100%;
}

.smallround {

width:6px;
height:6px;
background-color: var(--darkgreen);
border-radius:600px;
margin-bottom: 1px;


}

.smallroundwhite {

width:6px;
height:6px;
background-color: white;
border-radius:600px;
margin-bottom: 1px;


}

.frame-2872 .body-xs {
  max-width:  var(--reducedcolumnsizehp);
}

.frame-2872 {
width:100%;
height:auto;
max-width: var(--columnsizehp);
grid-column-gap:var(--regularspacing);
grid-row-gap:var(--regularspacing);
border:1px #000;
flex-direction:column;
justify-content:flex-start;
align-items:flex-start;
padding-bottom:0;
display:flex
}

.frame-2895 {
width:100%;
height:22px;
grid-column-gap:8px;
grid-row-gap:8px;
justify-content:flex-start;
align-items:center;
display:flex
}

.principlesblocks {
width:100%;
max-width:none;
background-color:#125a48;
border-radius:var(--regularspacing);
flex-direction:column;
justify-content:flex-start;
align-items:flex-start;
margin-top:-46px;
padding:var(--extralargespacing) var(--extralargespacing) 318px;
display:flex;
position: sticky;
top: calc(10% + 48px);
border-bottom: 4px solid #ebf0ef;
border-bottom-left-radius: var(--largespacing);
border-bottom-right-radius: var(--largespacing);
}

.paragraphprinciple{

margin-top: var(--regularspacing);
margin-bottom: var(--regularspacing);
max-width: var(--reducedcolumnsizehp);

}

.grid-homepage-practiceservicesprinciples{
width: 100%;
    border-radius: 0;

    align-items: flex-start;
    padding-top: var(--regularspacing);
    padding-bottom: 0px;
    display: flex;
    -moz-column-gap: var(--gridgap);
         column-gap: var(--gridgap);
    justify-content: space-between;

    flex-direction: row;
}

.principles {
width:100%;
grid-column-gap:64px;
grid-row-gap:16px;
flex-direction:column;

align-items:flex-start;

display: flex;


}

.principle{
  background-color: white;
  padding: 24px;
  border-radius: 8px;
}

.title {
grid-column-gap:8px;
grid-row-gap:8px;
flex:0 auto;
justify-content:flex-start;
align-items:center;
display:flex
}

.content-services {
width:100%;
height:auto;
max-width:none;
grid-column-gap:8px;
grid-row-gap:8px;
background-color:white;
border-radius:var(--regularspacing);
flex-direction:column;
justify-content:flex-start;
align-items:flex-start;
margin-top:-var(--largespacing);
margin-left:auto;
margin-right:auto;
padding:var(--extralargespacing);
display:flex;
padding-bottom: 360px;
position: sticky;
top: calc(10% + 98px);
min-height: 440px;

}

.blocsabout::after{
 height: 32vh;
  content: '';
  position: relative;
  display: inline-block;
}

.frame-2943 {
width:100%;
grid-column-gap:8px;
grid-row-gap:8px;
border:1px #052d23;
flex-direction:column;
justify-content:flex-end;
align-items:flex-start;
display:flex;
max-width: var(--columnsizehp);
}

.frame-2943 .body-xs {

max-width: var(--reducedcolumnsizehp);

}

.blog {
width:100%;
max-width:none;
grid-column-gap:0;
grid-row-gap:var(--largespacing);
flex-direction:column;
justify-content:flex-start;
align-items:flex-start;
padding:0px;
display:flex;
position:relative;
margin-bottom: var(--megaspacing);

}

.title-2 {
grid-column-gap:8px;
grid-row-gap:8px;
flex:0 auto;
justify-content:center;
align-items:center;
display:flex;
margin-bottom:  var(--regularspacing);
flex-direction: column;
    width: 100%;
    
}

.title-2.projects {
grid-column-gap:8px;
grid-row-gap:8px;
flex:0 auto;
justify-content:center;


   justify-content: space-between;
    align-items: center;
    display: flex;
    margin-bottom: 0;
    flex-direction: row;
    width: 100%;

    
}

.frame-2909 {
grid-column-gap:8px;
grid-row-gap:8px;
flex:0 auto;
justify-content:flex-start;
align-items:flex-start;
display:flex;
text-transform: uppercase;
}

.blogpostcontainer{

display: flex;
    text-decoration: none;
    align-items: flex-start;
    justify-content: flex-end;
    flex-wrap: nowrap;
    grid-auto-flow: row;
    flex-direction: column;

    width: 100%;
    grid-gap: var(--regularspacing);

}

.blogpost{
grid-column-gap:var(--regularspacing);
grid-row-gap:0;

flex-direction:column;
align-items:center;

color:var(--darkgreen);

display:grid;
grid-template-columns: 1fr;
width:auto;
max-width:none;
flex-direction:row;
justify-content:center;
align-items:flex-start;

text-decoration: none;
text-align: left;


width:100%;
cursor: url("../images/plus-circle-v3.svg"), auto;


}

.titleblogpost{

text-transform: capitalize;


}

.blogpost:hover {
opacity: 0.8;

}

.blogpost .body-xs {


}

.exploremore{

  display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    grid-gap: 8px;
}

.title-3.article{justify-content: space-between;}

.blogpost:hover > .titleblogpost{

text-decoration: underline;


}

.blog-prevnext{
  
    margin-top: 80px;
}

.grid.bloglist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--extralargespacing);
    padding-bottom: 160px;
    align-items: start;

}

#nextblogposts .bloglist{
    padding-top: var(--regularspacing);
     padding-bottom: var(--regularspacing);
}

.contentpopup {
    
    width: 100%;
    
    opacity: 0;
    visibility: hidden;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top:0;
    left: 0;
    z-index: 999;
    
    -webkit-backdrop-filter: blur(32px);
    
            backdrop-filter: blur(32px);
    background-color: #00000035;
    display: flex;
    animation: backdrop ease-out 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }

.containerpopup {
  max-width: 1480px;
  margin: auto;
  border-radius: var(--regularspacing);
  background-color: white;
  padding: var(--extralargespacing);

   animation: popupin ease-out 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    position: relative;

}

@keyframes backdrop {
  from {opacity: 0}
  to {opacity: 1;}
}

@keyframes popupin {
  from {    margin-top:150vh;}
  to { margin-top:25vh}
}

.fieldsform{
  display: flex;
  flex-direction: column;
  grid-gap:var(--regularspacing);
  width:100%;
}

.form-column{
 width: 100%;
 display: flex;
 flex-direction: column;
 row-gap:var(--regularspacing);
 height: 100%;
}

.honeypot {
    position: absolute;
    left: -9999px;
}

.contentpopup:target {
    opacity: 1;
    visibility: visible;
    
 }

#closepopup{
  position: absolute;
  top:var(--regularspacing);
  right:var(--regularspacing);
 }

.ctacontact {

display: grid;
align-items: center;
grid-gap: var(--largespacing);



grid-template-columns: 1fr 1fr;
padding: var(--extralargespacing);
justify-content: space-between;

}

.button {
height:auto;
grid-column-gap:0;
grid-row-gap:0;
background-color:var(--greenflash);
color:var(--darkgreen);
border-radius:8px;
flex-direction:column;
justify-content:flex-start;
align-items:flex-start;
padding:8px 12px;
display:inline-block;
text-decoration: none;



}

.button-dark {
height:auto;
grid-column-gap:0;
grid-row-gap:0;
background-color:var(--darkgreen);
color:var(--greenflash);
border-radius:8px;
flex-direction:column;
justify-content:flex-start;
align-items:flex-start;
padding:8px 12px;
display:inline-block;
text-decoration: none;



}

.button-mini{

padding:6px 4px ;
border-radius: 8px;
cursor: url("../images/plus-circle-v3.svg"), auto;

}

.button-invert{


background-color: white;


}

.workshopbutton {
background-color: transparent;
color: white;
border: 2px white solid;
    z-index: 1;
margin-top: 8px;
        padding: 12px 24px;
}

.blocctafooter:hover > .workshopbutton{
background-color:white ;
color: var(--darkgreen);
text-decoration: none;
}

.button::before {
  content: "→";
}

.button-dark::before {
  content: "→";
}

.button:hover {
  color:var(--darkgreen);
  background-color:white;
}

.button-dark:hover {
  color:var(--darkgreen);
  background-color:var(--greenflash);
}

.bloc-before-footer {
width:100%;
max-width:none;
grid-gap: var(--regularspacing);
justify-content:flex-start;
align-items:flex-start;
padding-top:0px;
display:flex;
flex-direction: row;
margin: 0px auto 160px auto;


    align-items: stretch;
}

.end-footer{

width:100%;
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: flex-end;
    justify-content: space-between;

    
     padding-top: var(--largespacing);
}

.termsbloc{


    display: flex;
    flex-direction: column;
    align-content: flex-start;
    align-items: flex-start;
    text-align: left;

}

.blocctafooter{

overflow: hidden;;
background-color: black;
border-radius: var(--regularspacing);

  padding: 128px 64px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items:flex-start;
  grid-gap: var(--largespacing);
  text-align: left;
      justify-content: flex-start;
 position: relative;
 text-decoration: none;
 cursor: url("../images/external.svg"), auto;
}

.lastbloc{
flex-direction: column;
background-color: #042725;
grid-gap: var(--regularspacing);
}

.textctafooter{
color: white;
z-index: 1;
}

.textctafooter .h2extra{
font-size: 96px;
}

.imgctafooter{

height:100%;
width:100%;
position: absolute;
opacity:0.3;
z-index: 0;
-o-object-fit:cover;
   object-fit:cover;
top: 0;
  left: 0;

}

.footer {
max-width:none;

flex-direction:column;
justify-content:flex-start;
align-items:center;

padding-left:0;
padding-right:0;
display:flex;


width: 100%;
  text-align: center;

  justify-content: space-between

}

.top-footer{

display: flex;
flex-direction:column;
justify-content:center;
align-items:center;
grid-gap:var(--largespacing);

}

.footertopline{display: flex;
flex-direction:row;
justify-content:center;
align-items:center;
grid-gap:var(--mediumspacing);}

.footertopline a {text-decoration: underline;}

.image-363 {
-o-object-fit:cover;
   object-fit:cover;
position:absolute;
top:610px;
left:940.75px
}

.butterflyelement {


-o-object-fit: cover;


   object-fit: cover;
position: absolute;
transform: rotateX(5);
transform: rotate(5deg);
z-index: 2;
}

.butterflyfooter{

margin-top: -5px;


}

.hero {
width:100%;

justify-content:center;
align-items:center;
display:flex;
flex-direction: column;
}

.blogtitle {
grid-column-gap:6px;
grid-row-gap:6px;
flex:0 auto;
justify-content:flex-start;
align-items:center;
display:flex;
text-transform: none !important;
flex-direction: row;
text-align: center;
margin: auto;
    width: 100%;
    
}

.seeallblog .body-3xs{

  width: 200px;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 0;
    text-decoration: none;
 
}

.seeallblog{

    margin-top: var(--regularspacing)
}

.title-3{
display:flex;
text-transform: uppercase;
justify-content:center;
align-items:center;
grid-column-gap:6px;
grid-row-gap:6px;

}

.title-3 > div{


}

.practice h2 {
margin-bottom: var(--regularspacing)

}

.screenshot-project {
width:80%;
height:100%;
border-radius:8px 8px 0 0;
justify-content:center;
align-items:center;
margin-left:auto;
margin-right:auto;
display:block;
overflow:hidden;
z-index:1;
position: relative;

}

#content-casestudy .screenshot-project {
width:80%;
max-width: 1680px;
height:100%;
 position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);

}

#content-casestudy .imageproject {
  width: 100%;
height:auto;
padding-top: 60%;

}

.screenshot-project-bloc {
width:100%;
height:100%;
border-radius:8px 8px 0 0;
justify-content:center;
align-items:center;
margin-left:auto;
margin-right:auto;
display:block;
overflow:hidden;
z-index:1;
position: relative;
transition: all 100ms ease-in-out;
padding:64px 64px 0 64px;
}

.screenshot-project-bloc > picture {
border-radius:8px 8px 0 0;
}

.info-footer {

max-width:none;

    justify-content: center;

 grid-gap: var(--mediumspacing);
display:grid;
flex-direction: column;
position: relative;
text-align: center;

padding: var(--largespacing);
background-color: white;
border-radius:var(--regularspacing);
align-items: center;

grid-template-rows: auto auto 1fr;
}

.info-footer-bloc{
  margin-top: var(--largespacing);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr  ;
  grid-gap: var(--regularspacing);
      align-items: stretch;
      margin:auto;
      width:100%;
 
     
}

.info-footer-bloc.environmentaldeclarationversion{


 background-color: white;
 border-radius: 16px;
     align-items: center;
     padding:8px 0;
     
}

.info-footer-bloc.journeydata{

   grid-template-columns: 1fr 1fr 1fr  ;
}

.assessment-page-bloc{

  padding: 0;
}

.assessment{display: flex ; flex-direction: column;  grid-gap: var(--regularspacing);width:100%;}

.info-footer.pagetitle{text-align: left;
justify-content: start}

.logos-social{

display: flex;
flex-direction: row;
align-items: center;
grid-gap: var(--regularspacing);
margin-bottom: 16px;
}

.logosocial{

width: var(--largespacing);
}

.hero-text {

max-width:none;
text-align:left;
margin:auto;
position:relative;
align-items: center;


    margin-top: 25vh;
    min-height: 50vh;
    display: flex;

    flex-direction: column;
}

.herohomepage{height:95vh; margin:auto; align-items: center; display: flex;    align-content: center;position: relative;min-height:650px;padding-top: 10%;}

.hero-default{width:80rem !important;max-width: 90vw;}

.hero-full{width:auto !important;max-width: 90vw;}

.hero-text.notehero{
  width:100%;
}

.hero-text.project, .hero-text.article  {width:70vw;display: flex; max-width: 1360px;
flex-direction: column;margin-bottom: var(--largespacing)}

.hero-text.article  {min-height: 50vh; margin-top: 25vh; display: flex;flex-direction: column;align-items: center; margin-bottom: 120px}

.hero-text.article > h1 {
margin-top: var(--largespacing);
font-size: 8rem;
}

.hero-text.project > h1 {
margin-top: var(--largespacing);
}

#intro-project{width:80%;margin-top:var(--regularspacing);text-align: center; ;}

.body-xm.lightgreen {
    max-width: 680px;

}

.logos {
   display: flex;
    align-items: center;
    margin: auto;
    width: 100%;
    flex-wrap: wrap;
  
    grid-gap: var(--largespacing);
    justify-content:space-between;
    
    padding: 64px 0;
  }

.logos  > * {

 
  width: calc(60vw / 7);
 

}

.logos  > a  {

display: flex;
    align-items: center;
 align-content: center

}

.logos > div {
  background: black;
  padding: var(--regularspacing);
}

.logos > div::before {
  content: "";
  padding-bottom: 100%;
  display: block;
}

.feature{
  
  border-radius: 8px;
  padding:24px;
}

.title-feature > h3{
 letter-spacing: -0.75px;
   font-size: 24px;
   line-height: 80%;
   
}

.feature > p{
  font-size: 16px;
  letter-spacing: 0px;
}

.title-feature{
  display: flex;
  justify-content: space-between;
  font-size: 24px;
  margin-bottom: 32px;
  align-items: center;
  
}

.emoji-feature{

  position: relative;
  font-size: 20px;
  
  font-family: sans-serif;
}

.emojis{

  z-index: 2;
  position: relative;
filter: brightness(0) saturate(100%) invert(15%) sepia(16%) saturate(2884%) hue-rotate(124deg) brightness(100%) contrast(103%);
}

.footerlogos {
  position: relative;
  bottom: 10px;
 
  right: 0px;
  display: flex;
  grid-gap: var(--regularspacing);
  align-items: center;
text-transform: uppercase;


}

.logoclient{

height: 30px;
filter:  sepia(100%) saturate(0%) hue-rotate(153deg) brightness(101%) contrast(105%);

}

.invertlogo{


filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(153deg) brightness(101%) contrast(105%);

}

.schoollogo
{

height: 40px;

}

/*NAVIGATION*/

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

#skip a {
    display: block;
    position: absolute;
    left: -999px;
    top: -999px;
    }

#skip a:focus {
    left: 0;
    top: 0;
    padding: 3px;
    background: #ffc;
    border:1px solid #990000;
    }

.nav-toggle {
  display: none;
  order: 1;
  margin-left: auto;
  padding: 0;
  height: auto;
  border: 0;
 
  background: none;
  color: #fff;
  font-weight: 500;
  line-height: 1rem;
  transition: border-top-color 250ms ease-out;
}

.nav-toggle .fa-times {
  display: none;
}

.nav-toggle[aria-expanded="true"] {
 
}

.nav-toggle[aria-expanded="true"] .fa-times {
  display: block;
}

.nav-toggle[aria-expanded="true"] .fa-bars {
  display: none;
}

.nav-toggle span {
  display: block;
  margin: 0.25em 0 0;
  font-size: 0.875em;
}

.nav-main {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: white;
  z-index: 1000;
}

nav {
    display: flex;
    -moz-column-gap: 32px;
         column-gap: 32px;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
}

.nav-main > ul {
  margin: auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  

}

.nav-main > ul > li {
  margin: 0;
}

.nav-main > ul > li > a {
  display: block;
  
  text-decoration: none;
}

.nav-main > ul > li > a:hover, .nav-main > ul > li > a:focus {
 
}

.subnav {
  padding: 1rem;
  color: #252525;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13.75rem, 1fr));
  grid-template-rows: auto;
  grid-gap: 2rem;
}

.subnav h2 {
  margin: 0;
  font-size: 1rem;
}

.subnav h2 a {
  color: #252525;
  text-decoration: underline;
}

.subnav h2 a:hover, .subnav h2 a:focus {
  color: #004080;
}

.subnav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.subnav ul li {
  margin-top: 1rem;
}

.subnav a {
  color: #06c;
  text-decoration: none;
}

.subnav a:hover, .subnav a:focus {
  color: #004080;
  text-decoration: underline;
}

.subnav[hidden], .subnav.noshow {
  display: none !important;
}

/*NAV DESKTOP*/

.nav-toggle {
    display: none;
  }

header {
    align-items: baseline;
  }

header.has-js-loaded .nav-toggle {
    display: none;
  }

header.has-js-loaded .nav-wrapper.noshow {
    display: block;
  }

.nav-main {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    background: transparent;
  }

.nav-main > ul {
    margin:auto;
    flex-direction: row;
  }

.nav-main > ul > li > a {
    position: relative;
   
   
  }

.nav-main > ul > li > a:hover, .nav-main > ul > li > a:focus {
   opacity: .8;
  }

.nav-main > ul > li > a:active {
    border-top-color: #e00;
  }

.nav-main > ul > li > a[aria-expanded="true"] {
    background: #fff;
    border-top-color: #e00;
    color: #252525;
    z-index: 1002;
  }

.subnav {
    position: absolute;
    left: 0;
    right: 0;
    top: 3.75rem;
    padding: 2rem;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 1001;
  }

.logo {
  margin: 0;
}

.logo a {
  display: block;
  padding: 0;
  font-size: 1rem;
  line-height: 100%;
  color: #fff;
  text-decoration: none;
}

/*MOBILE*/

@media screen and (max-width: 991px) {

    :root {

    --smallspacing: 0.5rem;
    --regularspacing: 1rem;
    --mediumspacing: 1.5rem;
    --largespacing: 2rem;
    --extralargespacing: 4rem;
    --megaspacing:3rem;
    --gridgap: var(--regularspacing);

    }


    html{
      font-size: 14px;
    }


 

.butterflyelement{transform: scale(0.8); top:18% !important;}

    /*MENU END*/



    .blocsabout {
     margin-bottom: 64px;
    }

.blocsabout::after {
    height: 0vh;
    content: '';
    position: relative;
    display: none;
}

    #quote {
      
      grid-template-columns: 1fr;
      
    }
.transparentbackground > div > .blocks{

  padding: 0;

  padding-top: 32px;
}



.transparentbackground .body-l {
  font-size: 1.5rem;
  line-height: 1.75rem;
  letter-spacing: -.032rem;
  border-radius: 0
 }
    .image {
    height:200px;
    padding-top:var(--largespacing);
    }

    .frame-2872 {
    max-width:none
    }

    .principles {
    max-width:none
    }

    .body {
    padding-left:var(--largespacing);
    padding-right:var(--largespacing)
    }

    .screenshot-project {
    display:flex
    }




    .info-footer {
    grid-template-columns:1fr 1fr
    }

    .info-footer-bloc{

      grid-template-columns: 1fr 1fr;
     

     
         
    }

    .hero-text {
    width:100%;
    margin-top: 0;
    min-height: auto;
    padding: 32px;
    }



    h1 {
  
    text-align: left;
     -webkit-hyphens: auto;
             hyphens: auto; 
 -moz-hyphens: auto;
    
   word-wrap: break-word;
  max-width: 100%;

    }
    
    .project {
    grid-template-columns:1fr
    }


.specs-project {
    display: flex;
    flex-direction: row;
    align-items: center;
 
    gap: .5rem;
    width: 100%;
    align-content: center;
}




.item-specs-project {
    justify-content: start;

}

.bloctitleinfo{width: 100%}
 /*   .herohomepage > h1 {
    text-align: center;
    margin-top: 32px;
    margin-bottom: 32px;
    font-size:22vw;
    }*/

    .hero-text.article > h1{
    font-size:17vw;
   
    }

 /* 
    .nav-main > ul {


      text-align: center;


      font-size:2.75rem;
    line-height:200%;
    letter-spacing:-.15rem;
    }

    .nav-toggle-exit{
        background: transparent;
        position: absolute;

        top: 20px;
         border: 0;
         display: flex;
    align-items: center;
     left: 50%;
      transform: translate(-50%, 0%);

    }

.nav-toggle-exit > img{ width:16px;}

    .singleitemmenu{

    opacity: .65;
    }


    .singleitemmenu.active{

    opacity: 1;
    border:0 !important;
    padding: 0;
    } */

    .grid.bloglist{
    grid-template-columns: 1fr;
    }

    #intro-project{

    width: 100%;
    
    }

    .linkproject{padding:var(--smallspacing);}


    .linkproject.body-l{font-size: 1.25rem}

    .hero-text.project, .hero-text.article {
      width: 100%;
      display: flex;
      max-width: none;
      flex-direction: column;

    }


    /*TYPOGRAPHY*/


    .quote{
    font-size:1.75rem;
    line-height:100%;
    letter-spacing:-.05rem

    }


    h2 {
    font-size:2.25rem;
    line-height:100%;
    letter-spacing:-.1rem
    }


  

    .top-footer .body-xxl{
    font-size:2rem;
    line-height:100%;
    letter-spacing:-.1rem
    }





    blockquote.body-xxl {
  font-size: 1.75rem;
  line-height: 100%;
  letter-spacing: -.1rem;
}


 blockquote  .body-xxs{
  font-size: 0.7rem;
  line-height: 100%;
  letter-spacing: 0.05rem;
}

 


    #intro-project{
    font-size:1.25rem;
line-height:1.65rem;
    letter-spacing:-.019rem
    }

    /*BASE IS 22px - Desktop large - rem table -> https://codebeautify.org/em-to-px-converter*/

  

    /*TYPO END*/

    .grid-homepage-practiceservicesprinciples {
      
     flex-direction: column;
     grid-gap: var(--smallspacing);
      
    }


    .practicegrid{
      
   
     grid-gap: var(--largespacing);
      
    }
    .bloc-content {
      
         display: flex;
    flex-direction: column;
    }
.pagestatsbloctwo {
  height: auto;
}

    .container-content.default {
      margin-top: 0;
    }

    .screenshot-project-bloc

    {
      padding: 32px 32px 0 32px;
    }




    .textctafooter .h2extra {
      font-size: 5em;
    }


    .ctacontact{

      min-width: auto;
      max-width: none;
    }


.ctacontact .body-xm{font-size: 1.25rem; line-height: 1.65rem}

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


    .columnblock > .blocks {
      
      padding: var(--mediumspacing);
    }



    .columnblock > .soloimage {
      
      padding:0px;
    }



    .columnblock > .quoteblock {
      padding: 0px;

    }

    .ctacontact {
     
      grid-template-columns: 1fr;
      padding: var(--largespacing);
    }


    .principles{
      width: 100%;
      grid-gap: var(--smallspacing);
    }

    .logosvg{

    position: fixed !important;
    top:13px;
      transform: none;

      width:55px;
      z-index: 4;
      
    }


    #logohey{

      
     
      transform: none;
      width:60px;
    }


    #logolow{
    transform: none;
     width:46px;
    right: 16px;

    }

    .end-footer {
      display: flex;
      flex-direction: column;
      align-content: center;
      align-items: flex-end;
      justify-content: space-between;
      padding-top: var(--largespacing);
      grid-gap: var(--largespacing);
    }


    .footerlogos{
    position: relative;
    bottom: 10px;
    right: auto;
    display: flex;
    grid-gap: var(--regularspacing);
    align-items: center;
    text-align: left;
    }


    .blogpost:first-child > .titleblogpost {
      font-size: 24px;
    line-height: 120%;
    letter-spacing: -.011em;
    }

    .h2extra {
    font-family:var(--headingfont);
    font-size: 3.5em;
    font-weight: 400;
    line-height: 78%;
    letter-spacing: 0;
    margin: 0;
    text-transform: uppercase;
    }

    .menu {
    display:none
    }

    .quote {
    width:100%;


    border: 0;

    font-size: 2rem;
    line-height: 105%;
    letter-spacing: -.06rem;


    }



    #quote{
    width:100%;
    margin:0;
    margin-left:0;
    padding: 0;
    }




#quote > blockquote {
padding: var(--largespacing) ;
    
}


blockquote {


padding:var(--largespacing);



}


form {
  
    margin-top: 64px;
    width: 100%;
}

    .info-project {
    grid-row-gap:var(--regularspacing);
    flex-direction:column;
    padding: var(--largespacing);
    }

    .blog {
    padding-left:0;
    padding-right:0;
    margin-bottom: 64px;
    }


    .content-services, .practice, .principlesblocks{
    position: relative; 
    margin-top:0;
    padding:var(--largespacing);
    top: auto;
    }

   .practice{
   
    padding-bottom:80px;
    margin-top: var(--smallspacing);

    }


    .principlesblocks{

    margin-top:-32px;
    padding-bottom: 64px;
    }


    .content-services{
margin:0;
    margin-top:-32px;
    padding-bottom: 64px;

    }

    .bloc-before-footer {
    flex-direction:column;
    width: 100%;
      margin-left: 0px ;
      padding: 0px;
     margin-top: 80px ;


    }


    .blocctafooter{
    padding: 32px;


    }

    .imageprojectbloc{
    height:250px;
    padding-top: 0;

    }

    .projecttitlebloc{
      width: 100%;

    }

    .body {
    padding-left:16px;
    padding-right:16px;
    width:100%;
    padding-top: 60px;
    }

    .hero {

    height: auto;
 
    padding-bottom:16px;
    
    }

    .projects{grid-template-columns: 1fr}

    .info-footer {
    flex-direction:column;
    display:flex
    }



    .blocks.cta {
    padding: 0;
}
.tagssection {
    margin-top: 32px; 
   margin-bottom: 32px; 
   
}

.tags {
    display: flex;
    flex-direction: row;
    -moz-column-gap: var(--regularspacing);
         column-gap: var(--regularspacing);
    padding: 0;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
   
}


.quotelogos{


padding:var(--largespacing);
margin: 64px 0;
grid-gap: 16px;
padding-bottom: 64px;

}

.logos{

    display: flex;
  justify-items: center;
        justify-content: space-around;
        align-items: center;
        align-content: center;
        flex-wrap: wrap;
        gap: 10%;
        -moz-column-gap: 16px;
             column-gap: 16px;
        row-gap: 32px;
        margin:0;
        padding: 48px 7%;

}



.logos  > * {

 
  width: 20%;
    height: 40px !important;

}


.logoclient {
  max-width: none;
  height:22px;

}


.schoollogo {
  height: 28px;
}



.tooltip .tooltiptext {


  min-width: auto; 
}

.workshopbutton {
  
  padding: 12px;
}

}

/*MINI MIN SCREENS */

@media screen and (max-width: 380px) {
.top-footer .body-xxl {
  font-size: 1.6rem;
  line-height: 100%;
  letter-spacing: -.04rem;
  text-align: center;
}

.info-footer-bloc {
  grid-template-columns: 1fr;
}
/*
h1 {
  font-size: 15vw;
}*/
}

@media screen and (max-width: 510px) {

.logos{

    display: flex;
  justify-items: center;
        justify-content: space-around;
        align-items: center;
        align-content: center;
        flex-wrap: wrap;
        gap: 10%;
        -moz-column-gap: 8px;
             column-gap: 8px;
        row-gap: 16px;
        margin:0;
        padding: 48px 7%;

}
.logos > *:last-child{display: none}
.logos  > * {

 
  width: 34%;
    height: 50px !important;

}
}

/*BIG SCREENS*/

@media screen and (min-width: 1680px) {


/*
h1 {
font-size:11em;
}

.hero-text {
width:45rem;

}
*/

.herohomepage{
min-height:850px;
}
.body, .wrapper{


box-sizing: content-box;
  margin-inline: auto;
  max-inline-size: clamp(16rem, 90vw, 108rem);

}
html {
font-size:16px;
}


}

@media screen and (min-width: 1800px) {


html {
font-size:18px;
}


}

/*TABLET*/

@media screen and (max-width: 1280px) and (min-width: 680px) {


.projects {
grid-template-columns: 1fr 1fr ;

}


/*
.herohomepage > h1 {
    font-size: 9rem;
    text-align: center !important;
}
.hero-text {
    width:40rem;
}

*/


}

@font-face {
font-family:'BoogyBrutPoster';
src:url('../fonts/BoogyBrutPoster-WhiteItalic-subset.woff2?v=1.0.0') format("woff2");
font-weight:400;
font-style:italic;

font-display: block;
}

@font-face {
font-family:'UntitledSans';
src:url('../fonts/UntitledSans-Regular-subset.woff2?v=1.0.0') format("woff2");
font-weight:400;
font-style:normal;
font-display: block;
}

/*ENVIRONMENTAL DECLARATION*/

.competitorcategory{border-bottom: 1px dotted grey; padding-bottom:64px; margin-bottom:32px; display: flex;
flex-direction: column;
align-items: flex-start;}

.competitorcategory:last-child{border-bottom: none}

/*END DECLARATION*/

.brevo-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 2147483000;
    background-color: #a5a5a5;
    background-color: rgba(31,31,31,0.4);
}

.brevo-overlay .brevo-content {
    border-radius: 5px;
    background-color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    width: 80%;
    min-width: 764px;
    max-width: 994px;
    height: 90%;
    max-height: 860px;
}

.brevo-overlay .brevo-content .brevo-close {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.brevo-overlay .brevo-content iframe {
    border-radius: 5px;
    width: 100%;
    height: 100%;
}

@media (max-width: 639px) {
    .brevo-overlay .brevo-content {
        width: 100%;
        height: 100%;
        min-width: 100%;
    }
}

@media (min-width: 380px){

    .tiny\:mt-0{
        margin-top: 0px
    }

    .tiny\:w-2\/3{
        width: 66.666667%
    }

    .tiny\:-translate-y-1\/4{
        --tw-translate-y: -25%;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .tiny\:gap-2{
        gap: 0.5rem
    }

    .tiny\:p-3{
        padding: 0.75rem
    }

    .tiny\:p-8{
        padding: 2rem
    }

    .tiny\:text-4xl{
        font-size: var(--step-7)
    }
}

@media (min-width: 640px){

    .sm\:grid-cols-1{
        grid-template-columns: repeat(1, minmax(0, 1fr))
    }

    .sm\:pt-8{
        padding-top: 2rem
    }
}

@media (min-width: 768px){

    .md\:w-1\/2{
        width: 50%
    }

    .md\:w-2\/3{
        width: 66.666667%
    }

    .md\:w-full{
        width: 100%
    }

    .md\:translate-x-1\/2{
        --tw-translate-x: 50%;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .md\:translate-y-1\/4{
        --tw-translate-y: 25%;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .md\:scale-x-100{
        --tw-scale-x: 1;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .md\:justify-center{
        justify-content: center
    }

    .md\:pt-0{
        padding-top: 0px
    }
}

@media (min-width: 1024px){

    .lg\:-bottom-40{
        bottom: -10rem
    }

    .lg\:-mt-24{
        margin-top: -6rem
    }

    .lg\:mb-96{
        margin-bottom: 24rem
    }

    .lg\:block{
        display: block
    }

    .lg\:\!flex{
        display: flex !important
    }

    .lg\:flex{
        display: flex
    }

    .lg\:grid{
        display: grid
    }

    .lg\:hidden{
        display: none
    }

    .lg\:aspect-auto{
        aspect-ratio: auto
    }

    .lg\:aspect-square{
        aspect-ratio: 1 / 1
    }

    .lg\:h-full{
        height: 100%
    }

    .lg\:\!w-2\/3{
        width: 66.666667% !important
    }

    .lg\:w-1\/2{
        width: 50%
    }

    .lg\:w-1\/3{
        width: 33.333333%
    }

    .lg\:w-2\/3{
        width: 66.666667%
    }

    .lg\:w-3\/5{
        width: 60%
    }

    .lg\:w-full{
        width: 100%
    }

    .lg\:translate-y-0{
        --tw-translate-y: 0px;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .lg\:scale-150{
        --tw-scale-x: 1.5;
        --tw-scale-y: 1.5;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .lg\:grid-cols-2{
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .lg\:grid-cols-3{
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .lg\:\!flex-row{
        flex-direction: row !important
    }

    .lg\:flex-row{
        flex-direction: row
    }

    .lg\:\!items-end{
        align-items: flex-end !important
    }

    .lg\:items-center{
        align-items: center
    }

    .lg\:\!justify-between{
        justify-content: space-between !important
    }

    .lg\:rounded-full{
        border-radius: 9999px
    }

    .lg\:\!px-32{
        padding-left: 8rem !important;
        padding-right: 8rem !important
    }

    .lg\:\!py-48{
        padding-top: 12rem !important;
        padding-bottom: 12rem !important
    }

    .lg\:px-0{
        padding-left: 0px;
        padding-right: 0px
    }

    .lg\:px-16{
        padding-left: 4rem;
        padding-right: 4rem
    }

    .lg\:px-6{
        padding-left: 1.5rem;
        padding-right: 1.5rem
    }

    .lg\:py-0{
        padding-top: 0px;
        padding-bottom: 0px
    }

    .lg\:py-16{
        padding-top: 4rem;
        padding-bottom: 4rem
    }

    .lg\:py-4{
        padding-top: 1rem;
        padding-bottom: 1rem
    }

    .lg\:pt-0{
        padding-top: 0px
    }

    .lg\:pt-16{
        padding-top: 4rem
    }

    .lg\:text-left{
        text-align: left
    }

    .lg\:text-center{
        text-align: center
    }

    .lg\:text-2xl{
        font-size: var(--step-5)
    }

    .lg\:leading-none{
        line-height: 1
    }

    .lg\:tracking-tight{
        letter-spacing: -0.025em
    }
}

@media (min-width: 1280px){

    .xl\:scale-125{
        --tw-scale-x: 1.25;
        --tw-scale-y: 1.25;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }
}

@media (min-width: 1480px){

    .xxl\:scale-100{
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }
}