/* defaults */

html, body {
    margin: 0;
    padding: 0;
    height: 100%;

    font-size: 24px;
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always;
    text-rendering: optimizeLegibility;
}

::selection {
    background-color: rgba(0, 0, 0, 0.25);
    color: white;
}

::-moz-selection {
    background-color: rgba(0, 0, 0, 0.25);
    color: white;
}

ol, ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: black;
}

a :hover {
    z-index: 10000000;
}

.hidden {
    display: none;
}

/* */

@font-face {
    font-family: RiformaMed;
    src: url(RiformaLL-Medium.otf)
}

@font-face {
    font-family: RiformaReg;
    src: url(RiformaLL-Regular.otf)
}

@font-face {
    font-family: RiformaBold;
    src: url(RiformaLL-Bold.otf)
}

.headline {
    position: fixed;
    z-index: 1;

    width: 100vw;
    height: 24px;
    padding-left: 6px;
    padding-right: 6px;

    background-color: white;

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

.etapes {
    position: absolute;
    left: 1vw;
    width: 75px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.etape {
    height: 6px;
    width: 6px;

    border-radius: 50%;
    background-color: black;

    opacity: 0%;

    transition: 1s ease;
}

.etape.switch-on {
    opacity: 100%;
    transition: 1s ease;
}

.etape2 {
    height: 6px;
    width: 6px;

    border-radius: 50%;
    background-color: black;

    opacity: 0%;

    transition: 1s 2s ease;
}

.etape2.switch-on {
    opacity: 100%;
}

.marian {
    position: absolute;
    opacity: 0;

    font-family: RiformaBold;
    font-size: 16pt;
    color: black;
    text-align: center;

    transition: opacity 1s ease;
}

.entree {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;

    position: absolute;

    z-index: 1;

    transform: translate3d(0%, 0, 0);

}

.entree.switch-on {
    transform: translate3d(0%, -100%, 0);
    transition: 1.5s 0.5s ease;
}

.entreetxt {
    height: 30vh;
    width: 100vw;
}

.entreetitre {
    color: black;
    position: absolute;

    top: 45vh;
    left: 50vw;

    z-index: 2;

    width: 80%;

    transform: translate(-50%, -50%);

    font-family: RiformaBold;
    font-size: 8vw;
    text-align: center;

    opacity: 100;

    cursor: pointer;

    transition: font-size 1.2s ease 0.5s, top 1.2s ease 0.5s, opacity 1s ease;
}

.entreetitre.switch-on {
    opacity: 0;

}

.entreetitreHeadline {
    font-size: 16pt;
    cursor: default;

    transform: translate(-50%, -50%);
    top: 14px;
}

.enter {
    position: absolute;
    left: 50vw;
    top: 55vh;
    transform: translate(-50%, -50%);
    width: 50px;
    color: black;
    text-align: center;
    font-family: RiformaMed;
    font-size: 1.4vw;
    opacity: 100%;

    transition: 0.6s ease;
}

.enter:hover {
    text-decoration: underline;
    cursor: pointer;
}

.enter.switch-on {
    opacity: 0%;
}

.container {
    transform: translate3d(0%, 0, 0);

    position: absolute;

    z-index: 0;

    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    background-image: url("../images/3dWide/Paperpunch_Wide.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    overflow: hidden;
}

.storyline {
    width: calc(3 * 100% / 5);
    height: 200px;
    margin-top: 42px;

    font-family: RiformaBold;
    color: white;
    text-shadow: 2px 2px 2px black;
    text-align: center;
    font-size: 20pt;
    line-height: 23pt;

    cursor: default;
}

.choixbig{
    width: 100%;
    height: 200px;
    display: flex;
    flex-direction: row;
}

.choix {
    width: 50vw;
    height: 50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-end;
}

.transition {
    width: 320px;
    height: 120px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 3px;

    visibility: hidden;
    margin: auto;    
    position: absolute;
    align-self: center;

    background-color: white;
    color: black;

    border: 1px black;

    text-align: center;
    font-family: RiformaMed;
    font-size: 12pt;
}

.logojuste {
    position: absolute;
    opacity: 100%;

    width: 80px;
    height: 80px;

    text-align: center;
    margin-top: 20px;

    background: url(Juste.svg);

    transition: opacity 1.5s 1.5s ease;
}

.logojuste.switch-on {
    opacity: 0%;
}

.logofaux {
    position: absolute;
    opacity: 100%;

    width: 80px;
    height: 80px;

    text-align: center;
    margin-top: 20px;

    background: url(Faux.svg);

    transition: opacity 1.5s 1s ease;
}

.logofaux.switch-on {
    opacity: 0%;
}

.titreTransition {
    margin-top: 4px;
    width: 100%;
    height: 16px;
    color: black;
    text-align: center;
    border-radius: 5px 5px 0 0;
    padding-left: 8px;

    font-family: RiformaBold;
    font-size: 16pt;

    opacity: 0;

    transition: opacity 1.5s ease 1.7s;
}

.titreTransition.switch-on {
    opacity: 100%;
}

.transition:hover {
    background-color: grey;
}

.transition.switch-on {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
}

.transition.switch-on .transitiontitle {
    visibility: visible;
    -webkit-animation: fadeIn  1s;
    animation-delay: 3s;
    animation: fadeIn 1s
}

@-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
  }
  
  @keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
  }

.texteTransition {
    opacity: 0;
    transition: opacity 1.5s ease 1.7s;
    font-size: 12pt;
    font-family: RiformaMed;
}

.texteTransition.switch-on {
    opacity: 100;
}

.again {
    position: absolute;
    right: 12px;

    width: 105px;

    padding-right: 6px;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;    
    box-sizing: border-box;         

    font-family: RiformaReg;
    font-size: 12pt;
    color: black;
    text-decoration: none;
    text-align: right;

    opacity: 0%;

    transition: 1s ease;
}

.again:hover {
    text-decoration: underline;
    cursor: default;
}

.again.switch-on {
    opacity: 100%;
}

.again.switch-on:hover {
    cursor: pointer;
}

.next {
    margin: auto;
    
    font-family: RiformaMed;
    font-size: 12pt;
    color: black;
    text-align: center;

    opacity: 0;

    transition: opacity 1.5s ease 1.7s;
}

.next.switch-on {
    opacity: 100;
}

.next:hover {
    text-decoration: underline;
    cursor: pointer;
}

.back {
    width: 100%;
    height: 100%;
}

.button {
    position: absolute;
    bottom: 36px;

    width: calc(100% / 3);
    height: 66px;


    padding: 0.5em;
    border: 1px black;

    border-radius: 8px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;

    font-size: 16pt;
    text-shadow: 2px 2px 2px black;
    color: white;
    text-decoration: none;
    font-family: RiformaMed;

    transition: text-decoration 1s ease;
}

.button:hover {
    cursor: pointer;
    text-decoration: underline;

    transition: text-decoration 1s ease;
}
.button.switch-selected {
    background-color: yellow;
}

.button2 {
    text-align: right;
    width: 63px;

    position: absolute;
    margin-top: 12px;
    right: 18px;

    font-family: Mondwest;
    font-size: 10pt;
    color: white;
    text-decoration: none;
}

.button2:hover {
    text-decoration: underline;
    cursor: pointer;
}

.button2.switch-selected {
    text-shadow: 1px 1px 1px black;
    color: black;
}

.button3 {
    text-align: right;
    width: 63px;

    position: absolute;
    margin-top: 12px;
    right: 18px;

    font-family: Mondwest;
    font-size: 10pt;
    color: black;
    text-decoration: none;
}

.button3:hover {
    text-decoration: underline;
    cursor: pointer;
}

.button3.switch-selected {
    text-shadow: 1px 1px 1px black;
    color: blue;
}

.panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-image: url("../images/3dWide/Keys_Wide.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    transform: translate3d(100%, 0%, 0);
    transition: transform 1s ease;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.panel.switch-on {
    transform: translate3d(0%, 0%, 0);
}

.panel2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/3dWide/Remote_Wide.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    transform: translate3d(100%, 0%, 0);
    transition: transform 1s ease;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.panel2.switch-on {
    transform: translate3d(0%, 0%, 0);
}

h1 {
    width: 50%;
}

.panelhaiti {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/3dWide/Haiti_Wide.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    transform: translate3d(100%, 0%, 0);
    transition: transform 1s ease;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.panelhaiti.switch-on {
    transform: translate3d(0%, 0%, 0);
}

.panelidol {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/3dWide/Idol_Wide.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    transform: translate3d(100%, 0%, 0);
    transition: transform 1s ease;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.panelidol.switch-on {
    transform: translate3d(0%, 0%, 0);
}

.panellast {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    transform: translate3d(0%, 100%, 0);
    transition: transform 1s ease;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.panellast.switch-on {
    transform: translate3d(0%, 0%, 0);
}

p {
    font-family: Helvetica;
    text-align: center;

    background-color: white;
}

.biotitle {
    font-family: euromed;
    width: 100%;
    color: black;
    text-align: center;
    font-size: 100px;
}

.bioMQ {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    position: fixed;


    background-color: white;

    overflow: scroll;

    width: 100vw;
    height: 100vh;

    transform: translate3d(0%, 100%, 0);
    transition: transform 1s ease;
}

.bioMQ.switch-on {
    transform: translate3d(0%, 0%, 0);
}

.MQtitle {
    margin-top: 2vh;
    width: 100vw;
    text-align: left;
    height: 8vw;


    font-family: RiformaBold;
    color: black;

    font-size: 7.5vw;

    text-align: center;

    order: 1;

    z-index: 100;
}

.MQtxt {
    color: black;
    font-family: RiformaMed;
    font-size: 12pt;
    line-height: 14.3pt;

    margin-left: calc(100vw / 5);
    padding-left: 5px;

    width: calc(100vw / 10 * 3);

    order: 2;
    hyphens: auto;
}

.MQimg {
    width: 29.2vw;
    height: 35vw;
    margin-left: 30px;

    background-image: url("../images/marian05.jpeg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: RiformaReg;

    background-color: black;

    order: 3;
}

.MQgoforit {
    width: 29.2vw;
    height: 6vh;

    margin-left: calc(50% + 35px);
    bottom: 28px;

    position: absolute;

    font-family: RiformaMed;
    font-size: 12pt;
    line-height: 14.3pt;
    color: black;

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

    transition: 1s ease;

    order: 4;
}

.MQgoforit:hover {
    text-decoration: underline;
    cursor: pointer;
}

.LQbio {
    width: 100vw;
    height: 100vh;
    position: fixed;

    justify-content: space-evenly;
    align-items: center;

    background-color: white;

    transform: translate3d(0%, 100%, 0);
    transition: transform 1s ease;

    overflow: scroll;
}

    

.LQbio.switch-on {
    transform: translate3d(0%, 0%, 0);
}

.LQtxt {
    width: 50vw;
    height: auto;
    font-family: RiformaMed;
    font-size: 14pt;

    margin: auto;
    margin-top: 20vh;
    margin-bottom: 48px;


    color: black;
    text-align: justify;

    overflow: visible;
    hyphens: auto;
}

.LQgoforit {
    width: 50vw;
    height: 4vh;
    font-family: RiformaMed;
    font-size: 14pt;
    color: black;

    margin: auto;
    margin-bottom: 24px;

    text-align: center;
    align-self: center;

    transition: 1s ease;
}

.LQgoforit:hover {
    background-color: white;
    color: black;
    text-decoration: underline;
    cursor: pointer;
}

.panelHQ {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    transform: translate3d(0%, 100%, 0);
    transition: transform 1s ease;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.panelHQ.switch-on {
    transform: translate3d(0%, 0%, 0);
    position: absolute;
}

.bioHQ {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;

    width: 100vw;
    overflow: hidden;


    position: absolute;
}

.bioHQ01 {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column; 
}

.HQentries {
    align-self: center;
    margin: auto;
}

.HQentry01 {
    font-family: RiformaMed;
    font-size: 1.4vw;
    color: black;
    text-align: center;
}

.HQtitle {
    font-family: RiformaBold;
    width: 100%;
    color: black;
    text-align: center;
    font-size: 8vw;
    margin: 8px 0px 8px;
}

.HQentry02 {
    font-family: RiformaMed;
    font-size: 1.4vw;
    color: black;
    text-align: center;
}

.bioarrow {
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
  
    border-top: 20px solid black;

    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.5%;

    cursor: pointer;
    
    transition: transform 0.3s ease-in-out;

    animation-name: bioarrow;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-play-state: initial;
    animation-timing-function: ease-in-out;
}

@keyframes bioarrow {
    0% {transform: translate3d(0%, 0%, 0);}
    50% {transform: translate3d(0%, -50%, 0);}
    100% {transform: translate3d(0%, 0%, 0);}
}



.bioHQ02 {
    width: 600vw;
    height: calc(100vh - 24px);
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    background-color: white;

    margin-left: 0;

    font-family: RiformaMed;
    overflow: hidden;

    transition: margin-left 1s ease-in-out;
}

img {
    align-self: center;
    max-height: calc(100vh - 24px);
}



.bioarrow2 {
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
  
    border-bottom: 20px solid black;

    

    position: absolute;
    align-self: center;
    bottom: 4vh;
    
    margin-left: auto;
    margin-right: auto;

    cursor: pointer;
    
    transition: transform 0.3s ease-in-out;

    animation-name: bioarrow2;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-play-state: initial;
    animation-timing-function: ease-in-out;
}

@keyframes bioarrow2 {
    0% {transform: translate3d(0%, 0%, 0);}
    50% {transform: translate3d(0%, -50%, 0);}
    100% {transform: translate3d(0%, 0%, 0);}
}

.bioHQbox {
    height: calc(100vh - 24px);
    width: 100vw;

    display: flex;
    flex-direction: row;
    justify-content: space-between;

    border-top: 4px solid black;

    font-family: RiformaMed;
    overflow: hidden;
}

.bioHQimg {
    height: calc(100vh - 24px);
    width: 50vw;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    flex-grow: 2;
    justify-content: center;
    flex-direction: row;

    cursor: url("../images/arrowleft.png") 36 36, pointer;
}

.bioHQimg2 {
    height: calc(100vh - 24px);
    width: 50vw;
    overflow: hidden;
    display: flex;
    justify-content: left;
    flex-direction: row;

    cursor: url("../images/arrowleft.png") 36 36, pointer;
}

.bioHQtext {
    width: 50vw;
    height: 100vh;
    right: 0;
    background-color: white;
    
    padding-top: 12px;
    padding-left: 12px;
    padding-right: 12px;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;    
    box-sizing: border-box;         

    font-family: RiformaMed;
    font-size: 20pt;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    hyphens: auto;

    cursor: url("../images/arrowright.png") 36 36, pointer;
}

.rajouttexte01 {
    position: absolute;
    width: 450px;
    height: 74px;
    font-family: RiformaMed;
    font-size: 20pt;
    text-align: left;
    background-color: white;
    top: 100vh;
    padding: 8px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;    
    box-sizing: border-box;         
    border-top: solid 4px black;
    left: 0%;
    opacity: 100%;
    transition: opacity 0.5s ease-in-out;
}

.rajouttexte01.switch-on {
    opacity: 0%;
}

.bioHQbox01 {
    height: calc(100vh - 24px);
    width: 100vw;

    display: flex;
    flex-direction: row;
    justify-content: space-between;

    border-top: 4px solid black;

    font-family: RiformaMed;

    overflow: hidden;
}

.bioHQ02.switch-on01 {
    margin-left: -100vw;
}

.bioHQ02.switch-on02 {
    margin-left: -200vw;
}

.bioHQ02.switch-on03 {
    margin-left: -300vw;
}

.bioHQ02.switch-on04 {
    margin-left: -400vw;
}

.bioHQ02.switch-on05 {
    margin-left: -500vw;
}