@font-face {
  font-family: "Paraiso Sans";
  src: url("../fonts/Paraisov0.6-Sans.woff");
  src: url("../fonts/Paraisov0.6-Sans.woff2");
}
@font-face {
  font-family: "Petit Frere";
  src: url("../fonts/PetitFrereNarrow-Regular.woff");
  src: url("../fonts/PetitFrereNarrow-Regular.woff2");
}
@font-face {
  font-family: "11";
  src: url("../fonts/ReadyActive-Light.woff");
  src: url("../fonts/ReadyActive-Light.woff2");
}
@font-face {
  font-family: "12";
  src: url("../fonts/ReadyActive-Regular.woff");
  src: url("../fonts/ReadyActive-Regular.woff2");
}
@font-face {
  font-family: "13";
  src: url("../fonts/ReadyActive-Bold.woff");
  src: url("../fonts/ReadyActive-Bold.woff2");
}
@font-face {
  font-family: "21";
  src: url("../fonts/ReadyBygone-Light.woff");
  src: url("../fonts/ReadyBygone-Light.woff2");
}
@font-face {
  font-family: "22";
  src: url("../fonts/ReadyBygone-Regular.woff");
  src: url("../fonts/ReadyBygone-Regular.woff2");
}
@font-face {
  font-family: "23";
  src: url("../fonts/ReadyBygone-Bold.woff");
  src: url("../fonts/ReadyBygone-Bold.woff2");
}
@font-face {
  font-family: "31";
  src: url("../fonts/ReadyClouded-Light.woff");
  src: url("../fonts/ReadyClouded-Light.woff2");
}
@font-face {
  font-family: "32";
  src: url("../fonts/ReadyClouded-Regular.woff");
  src: url("../fonts/ReadyClouded-Regular.woff2");
}
@font-face {
  font-family: "33";
  src: url("../fonts/ReadyClouded-Bold.woff");
  src: url("../fonts/ReadyClouded-Bold.woff2");
}

:root {
  --small: 0.9rem;
  --big: 6rem;
    --huge: 18rem;
}


body {
    font-size: var(--small);
    font-family: "Petit Frere";
  font-weight: normal;
  font-style: normal;
    height: 100%;
    margin:0;
    padding:0;
background-color: black;
overflow-x: hidden;}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

img {
  max-width: 100%; }

a:focus,
input:focus,
textarea:focus,
button:focus {
  text-decoration: none;
  outline: none; }

a:focus,
a:hover {
  text-decoration: none;
opacity: 0.7;}

i,
span,
a {
  display: inline-block;
color: inherit;}


ul, ol {
  margin: 0px;
  padding: 0px;
  list-style-type: none; }

p {
  margin: 0px; }


.sans{
    font-family: "Paraiso Sans";
}

.hidden{
    visibility: hidden;
}

#delacouleur{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0; left:0;
    z-index: 1000;
    background: #00C763;
    mix-blend-mode: screen;
    pointer-events: none;
    visibility: hidden;
}
#page{
    font-size: var(--small);
  color: white;
background: black;
z-index: 1;
}

.header{
    mix-blend-mode: difference;
    position: fixed;
    width: 100%;
    top: 10px;
    z-index: 900;
}
.menu-grid{
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    padding: 10px 40px 0;
}
.menu-column{
    grid-column-end: span 1;
}
.menu-column a{
    text-decoration: none;
}

#info{

}

.infopanel{
    background: white;
    color: black;
    border: 1px solid black;
    border-radius: 0px;
    width: 300px;
    height: auto;
    margin: 0 auto;
    top: 40px;
    margin-left: calc(25% + 20px);
    position: fixed;
    z-index: 999;
    padding: 18px 30px 25px 20px;
    visibility: hidden;
}
.infopanel span{
    padding-right: 10px;
}

.togglewaitwhat{
    cursor: pointer;
}
.closebutton{
    float: right;
    position: absolute;
    right: 15px;
}

.waitwhatpanel{
    background: red;
    height: 150px;
    width: 150px;
    position: fixed;
    top: 10%;
    left: 20%;
}

.readtrybuycolumn{
    z-index: 666;
}
.readtrybuy{
    float: right;
    display: inline-block;
    border: 1px solid white;
    margin-left: -1px;
    padding: 2px 8px;
    cursor: pointer;
}
.readtrybuy a{
    text-decoration: none;
}
.readtrybuy:hover{
    background: white;
    color: black;
    opacity: 1;
}

.dot:hover{

}



.title{
    font-size: var(--huge);
    text-align: center;
    margin: 130px 0 70px;
}
.title:hover{
    cursor: default;
}
.title span{
    margin: 0;
backface-visibility: hidden;
}

.soustitre{
    width: 100%;
    font-family: "Petit Frere";
    font-size: var(--small);
    margin: 0;
}

.intro{
    font-size: var(--big);
    line-height: 0.9em;
    margin: 0 auto;
    padding: 40px;
    overflow-y:visible;
    /*     pointer-events: none; */

}

.section3{
    background:  linear-gradient(180deg, #000000, #000000, #000000, #000000, #000000, #040404,  #191919, #2e2e2e, #7f7f7f) ;
}
.section4{
    background: linear-gradient(0deg, #ffffff, #ffffff, #ffffff, #ffffff,#ffffff, #fdfdfd, #f2f2f2, #d0d0d0, #7f7f7f) ;
}
.section5{
    background: white
}
.section6{
    background: linear-gradient(180deg, #ffffff, #ffffff, #ffffff, #ffffff,#ffffff, #fdfdfd, #f2f2f2, #d0d0d0, #7f7f7f) ;
}
.section7{
    background:  linear-gradient(0deg, #000000, #000000, #000000, #000000, #000000, #040404,  #191919, #2e2e2e, #7f7f7f) ;
}

.ladiff{
    top: 60px;
    margin-bottom: 80px;
    overflow-y: hidden;
    mix-blend-mode: difference;
    position: sticky;
    line-height: 0.9em;
}

.threepiglets{
    width: calc(100% - 40px);
    display: grid;
    grid-template-columns: 33.333% 33.333% 33.333%;
    grid-column-gap: 20px;
}

.pullupselecta{
    text-align: center;
    line-height: normal;
    background: black;
    color: white;
    padding: 1px;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    mix-blend-mode: normal !important;
    margin: 30px 0;
    border-right: none;
    border-left: none;
    font-size: var(--small);
}

.input{
    font-family: "Petit Frere";
    font-size: var(--small);
    line-height: normal;
    background: black;
    color: white;
    border: none;
}

.petit{
    text-align: center;
    line-height: normal;
    font-family: "Petit Frere";
    font-size: var(--small);
    background: black;
    color: white;
    padding: 1px;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    mix-blend-mode: normal !important;
    margin: 30px 0;
    border-right: none;
    border-left: none;
}
.bar{
    border: none !important;
    letter-spacing: -0.05em;
}

.sentence{
    text-align: center;
    margin: 0 auto;
    width: 100%;
    padding-bottom: 15px;
    padding-top: 10px;
    overflow-x: hidden;
}
.sentence span{
outline: 0px solid transparent;
}
.biggie{
    font-size: 50em;
    margin-bottom: -40px;
    line-height: 1em;
}

.style11{
    font-family: "11";
}
.style12{
    font-family: "12";
}
.style13{
    font-family: "13";
}
.style21{
    font-family: "21";
}
.style22{
    font-family: "22";
}
.style23{
    font-family: "23";
}
.style31{
    font-family: "31";
}
.style32{
    font-family: "32";
}
.style33{
    font-family: "33";
}

.topimg{
pointer-events: none;
}



footer{
    text-align: center;
    color: white;
    margin-top: 60px;
      height: 200px;
}
footer a{
    text-decoration: none;
}

.footerbigready{
    position: static;
    text-align: center;
    font-family: "33";
    display: block;
    font-size: var(--huge);
    bottom: -80px;
    color: white;
}

.twopiglets{
    width: calc(100% - 60px);
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-column-gap: 20px;
}


input[type = submit] {
            background-color: black;
            border: 1px solid white;
            text-decoration: none;
            color: white;
            padding: 1px 4px;
            margin: 3px 8px;
            cursor: pointer;
         }
input[type = submit]:hover {
            background-color: white;
            border: 1px solid white;
            color: black;
         }
input[type = text] {
            border: 1px solid white;
            padding: 0;
            margin: 0;
         }





  .back-to-top:hover {
    cursor: n-resize}





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

:root {
  --small: 0.82rem;
  --big: 3rem;
    --huge: 6.5rem;
}
    .intro{
        padding: 20px;
    }
    .infopanel{
        margin-left: 0;
        right: 20px;
    }
    .threepiglets{
        display: none;
    }
    .twopiglets{
        grid-template-columns: 2fr 2fr;
        width: calc(100% - 20px);
        grid-column-gap: 20px;
    }

    .menu-grid{
        grid-template-columns: 2fr 2fr;
        padding: 10px 20px 0;
    }
    .menucolumn{
        grid-column-end: span 2;
        margin: 0 auto;
        width: 100%;
    }
    .waitwhatcolumn{
        float: right;
        text-align: right;
    }
    .readtrybuycolumn{
        width: 100%;
        grid-column-end: span 2;
    }


}

@media screen and (max-width: 580px) {
    :root {
  --small: 0.82rem;
  --big: 2.1rem;
    --huge: 4.5rem;
}
    .mobile-no{
        display: none;
    }

}