@font-face {
    font-family: 'Gravity';
    src: url(Fonts/Gravity/ABCGravity-SemiCondensed-Trial.otf);
}
@font-face {
    font-family: 'Walter';
    font-weight: 'regular';
    src: url(Fonts/Walter/ABCWalterNeue-Medium-Trial.otf);
}
@font-face {
    font-family: 'Walter Mono';
    font-weight: 'light';
    src: url(Fonts/Walter/ABCWalterNeue-Light-Trial.otf)
}
@font-face {
    font-family: 'Neue Haas';
    font-weight: 'regular';
    src: url(Fonts/NeueHaasDisplayMediu.ttf);
}
@font-face {
    font-family: 'Neue Haas Italic';
    font-weight: 'regular';
    src: url(Fonts/NeueHaasDisplayLightItalic.ttf);
}
body{
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    background-color: rgb(201, 0, 0);
}
.container.two::-webkit-scrollbar {
  display: none;
}
#Logo{
    left: 8%;
    transform: translateX(-50%);
    z-index: 5;
    top: 2%;
    position: fixed;
    fill: #e7e7e7;
    height: 5vw;
    max-width: 20vw;

}
.content{
    display: flex;
}
.container.one{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 50%;
    height: 100%;
    background-color: rgb(224, 0, 0);
}
.product-display{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding-bottom: 3vw;
}
.image-display{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: inset 0 0 20px black;
    border-radius: 55%;
    background-image: url(Images/Sky.jpg);
    background-size: cover;
    margin-top: 4vw;
    height: 40vw;
    width: 30vw;
}
.image-display img{
    filter: drop-shadow(0 4px 12px rgb(255, 255, 255));
    position: relative;
    z-index: 2;
    object-fit: contain;
    width: 90%;
    max-height: 90%;
}
.image-display video {
    z-index: 0;
    height: 42vw;
    width: 32vw;
    object-fit: fill;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.dropdown-product.active .product-options {
  display: block;
}


.custom-dropdown, .dropdown-product{
    font-size: 1vw;
    position: relative;
    font-family: 'Walter', 'regular';
    user-select: none;
}

.selected, .product-select{
    padding: 0.2vw;
    line-height: 0.8;
    text-align: center;
    color: rgb(224, 0, 0);
    background-color: #e6e6e6;
    border-radius: 5vw;
    font-family: 'Walter', 'regular';
    border-radius: 8px;
    cursor: pointer;
}

.options, .product-options {
    color: rgb(224, 0, 0);
    padding-top: 1vw;
    padding-left: 0;
    background-color: #e6e6e6;
    border-radius: 10%;
    width: 120%;
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.options li,.product-options li {

    padding-left: 1vw;
    margin-bottom: 0.7vw;
    list-style: none;
    cursor: pointer;
}

.options li:hover, .product-options li:hover {
    transition: background-color 0.5s ease;
    color: #e6e6e6;
    background-color: rgb(224, 0, 0);
}

.custom-dropdown.active .options {
    display: block;
}



.select-container{
    color: #e6e6e6;
    font-family: 'Walter';
    margin: 1em;
    width: 80%;
    display: grid;
    grid-template-columns: 1fr 2fr 4fr 3fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    height: 6vw;
}
.select-container div:nth-child(1){
    grid-row: 1/ span 1;
}
.select-container div:nth-child(3){
    grid-row: 3/ span 1;
}
.select-container div:nth-child(4){
    grid-row: 3/ span 1;
}
.select-container div:nth-child(even){
    grid-column: 2/2;
}
.select-container div:nth-child(5) {
    padding-left: 2vw;
    padding-right: 0.5vw;
    grid-column: 3 / span 1;  /* de la 3e colonne sur 2 colonnes */
    grid-row: 1 / span 2;     /* de la 1re ligne sur 2 lignes */
}
.product-description{
    font-family: 'Walter Mono', 'regular';
}
.select-container div:nth-last-child(1){
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(224, 0, 0);
    background-color: #e7e7e7;
    border-radius: 1vw;
    margin-left: 1vw;
    margin-bottom: 1vw;
    grid-column: 4 / span 2;  /* de la 3e colonne sur 2 colonnes */
    grid-row: 2 / span 3;     /* de la 1re ligne sur 2 lignes */
}
.select-container div:nth-last-child(1):hover{
    opacity: 0.8;
    transition: opacity 0.5s ease;
}
.select-container div:nth-last-child(1) span{
    pointer-events: none;
    font-family: 'Gravity', 'regular';
    font-size: 2em;
    text-align: center;
    width: 100%;
}
.container.two {
    position: absolute;
    left: 50%;
    box-shadow: -1px -0px 0 #e6e6e6;
    overflow-y: auto;
    background-color: rgb(224, 0, 0);
    color: rgb(212, 212, 212);
    font-size: 6.5vw;
    line-height: 0.9;
    font-family: 'Gravity';
    width: 50%;
    height: 100%;
}

.title{
    position: relative;
    align-self: flex-end;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: rgb(224, 0, 0);
    font-family: 'Gravity';
    color: #e6e6e6;
    text-align: left;
    font-size: 7vw;
    line-height: 0.9;
    box-shadow: -0px 1px 0 #e6e6e6;

}
.title span{
    padding: 5vw 5vw 3vw 9vw;
}
.subtext{
    position: relative;
    text-align: left;
    text-transform: uppercase;
    font-family: 'Neue Haas', 'regular';
    padding-top: 3vw;
    padding-left: 9vw;
    padding-bottom: 3vw;
    padding-right: 7vw;
    font-size: 0.3em;

}

.subtext.one div{
    text-transform: none;
    font-size: 0.7em;
    margin-top: 0.5em;
    line-height: 1.2;
    font-family: 'Walter Mono', 'regular';
}
.subtext.two{
    display: flex;
    flex-direction: column;
    box-shadow: -0px 1px 0 #e6e6e6;
}
.subtext.two div{
    text-transform: none;
    font-size: 0.7em;
    display: flex;
    position: relative;
    width: 100%;
    margin-top: 0.5em;
    line-height: 1.2;
    font-family: 'Walter Mono', 'regular';
}
.subtext.two span{
    width: 50%;
    padding-right: 1em;
}
.subtext.two img{
    opacity: 0.85;
    width: 50%;
    object-fit: contain;
    max-height: 18vw;
    mix-blend-mode:lighten;
}
.subtext.three{
    box-shadow: -0px 1px 0 #e6e6e6;
}
.subtext.three div{
    display: flex;

}
.subtext.three video{
    mix-blend-mode: screen;
    max-height: 20vw;
}
.scroll-container {
    z-index: 2;
    position: fixed;
    bottom: 0;
    width: 100vw;
    overflow: hidden;
}

.scrolling-logos {
    fill: #e6e6e6;
    font-family: "Geist Medium", sans-serif;
    font-size: 1.25vw;
    word-spacing: 6px;
    display: flex;
    align-items: center;
    flex-direction: row;
    color: rgb(177, 177, 177);
    white-space: nowrap;
    height: 4vw;

    animation: scroll-left 55s linear infinite;
}
.scrolling-logos svg{
    flex-shrink: 0;
    padding-left: 1vw;
}
.scrolling-logos div{
    font-size: 1vw;
    color: #e6e6e6;
    font-family: 'Walter Mono', 'regular';
    text-transform: uppercase;
    padding-left: 1vw;
}
#Arko{
    height: 2vw;
}
#CP98{
    height: 1.5vw;
}
#Kazoku{
    height: 2.2vw;
}
#Marquo{
    height: 2.2vw;
}
#Medley{
    height: 1.7vw;
}
#Oprisme{
    height: 2.4vw;
}
#Cobalt{
    height: 2.2vw;
}


.arrowcontents {
    position: relative;
    width: 100%;
    margin: auto;
}

.viewport {
    overflow: hidden;
}

.content-container {
    mix-blend-mode: screen;
    display: flex;
    justify-content: start;
    align-items: start;
    margin-top: 2vw;
}

.card {
    mix-blend-mode: screen;
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-column: 1/3;
    box-sizing: border-box;
    padding: 10px;
    flex: 0 0 600px; /* largeur fixe identique à la viewport */
}
.card:nth-child(2) video{
    transform: scale(0.75);
}
.card:nth-child(3) video{
    transform: scale(0.8);
}
.card:nth-child(4) video{
    transform: scale(0.6) translateX(-20%);
}
.card span{
    padding-top: 1vw;
    width: 50%;
    text-align: center;
    font-family: 'Walter Mono', 'regular';
    text-transform: none;
    font-size: 0.7em;
}
.card div{
    padding-top: 2vw;
}
#prev, #next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 2rem;
    z-index: 10;
    padding: 0.5rem;
    user-select: none;
}

#prev { left: 0; }
#next { right: 0; }
.subtext.four{
    display: flex;
    flex-direction: column;
}
.subtext.four div{
    display: flex;
}
.subtext.four div:nth-child(2) span{
    line-height: 1.1;
    margin-top: 2vw;
    margin-right: 2vw;
    display: flex;
    flex-direction: column;
    text-transform: none;
    font-family: 'Neue Haas Italic', 'regular';
    font-size: 0.7em;
}
credit{
    text-transform: none;
    font-family: 'Neue Haas Italic', 'regular';
    font-size: 0.6em;
    line-height: 1.1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 10vw;
}
credit div:nth-last-child(1) span{
    text-decoration: underline;
    margin-top: 5vw;
    text-transform: none;
    font-family: 'Walter Mono', 'regular';
    font-size: 0.7em;
}
#logooverlay{
    margin-top: 5vw;
    fill:#e6e6e6;
    width: 8vw;
}
.form {
    height: 80%;
    color: #e6e6e6;
    width: 100%;
    font-family: 'Walter', 'regular';
    opacity: 0;
    pointer-events: none;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 20vh;
}
.form .formtitle{
    margin-bottom: 3vw;
}
.form > div {
  display: flex;
  gap: 2rem;
}
.informations {
    display: flex;
    flex-direction: column;
    color: #e6e6e6;
    justify-content: center;
}
.informations span{
    text-transform: uppercase;
    font-family: 'Walter', 'regular';
    margin-bottom: 1vw;
}
.inputs {
    margin-bottom: 3vw;
    width: 25vw;
    color: #e6e6e6;
    background-color: rgba(0,0,0,0);
    display: flex;
    flex-direction: column;
}

.inputs input {
    all: unset; /* enlève tous les styles par défaut du navigateur */
    color: #e6e6e6;
    box-shadow: -0px 1px 0 #e6e6e6;
    margin-bottom: 1vw;
    font-family: 'Walter Mono', 'regular';
    background-color: transparent;
    width: 100%;
    box-sizing: border-box;
}

.inputs input::placeholder {
    color: #e6e6e6;
    opacity: 1; /* important pour Firefox qui applique une opacité par défaut */
}
.formcontrol .send, .formcontrol .return{
    cursor: pointer;
    background-color: #e6e6e6;
    color: rgb(224, 0, 0);
    padding-left: 0.5vw;
    padding-right: 0.5vw;
    border-radius: 1vw;
}
.formcontrol .send:hover, .formcontrol .return:hover{
    opacity: 0.8;
    transition: opacity 0.5s ease;
}
.sent-message{
    position: absolute;
    right: 30%;
    background-color: rgba(0,0,0,0);
    color: #e6e6e6;
}
#icon{
    padding-right: 0.5vw;
    fill: #e6e6e6;
    height: 2vw;
    transform: scale(1.2);
}
.manifesto{
    text-transform: none;
    font-family: 'Neue Haas Italic', 'regular';
}
@keyframes scroll-left {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-200%);
    }
}
@media screen and (max-width: 920px) {
    /* Add responsive styles here */
}