@charset "UTF-8";
/* 
@font-face {
    font-family:'RiformaLL:Heavy';
    src: url('../fonts/RiformaLL-HeavyItalic.otf') format('otf');
    font-family:'RiformaLL:Medium';
    src: url('../fonts/RiformaLL-Medium.otf') format('otf');
    font-family:'Luis';
    src: url('../fonts/Luis-Black.otf') format('otf');
    font-family:'akkurat';
    src: url('../fonts/akkurat.otf') format('otf');
} */

@font-face {
    font-family: 'akkuratregular';
    src: url('../fonts/akkurat-webfont.woff2') format('woff2'),
         url('../fonts/akkurat-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'luisblack';
    src: url('../fonts/luis-black-webfont.woff2') format('woff2'),
         url('../fonts/luis-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}



  

html, body {
    width: 100%;
    height: 150%;
    background-repeat: no-repeat;
    background: black;
    overflow-x: hidden;
    
   
    
}

body p {
    font-family: 'akkuratregular' !important;
    font-size: 5vw !important;
}
.nav {
    height: 22vw;
    width: 100%;
    background-color: yellow;
    /* border-bottom: 5px solid black; */
    position: sticky;
    font-family: 'luisblack';
    font-size: 15vw;
    z-index: 1
  
}

.nav h1 {
    left: 50%;
    text-align: center;
    
}


.container {
    margin-top: -250%;
    width: 1%;
    height: 1%;
}

.pneu{
    position: absolute;
    top: 37%;
    z-index: 2;

}

#cerchione {
   top: 90%;
   
}

.pneu img {
    width: 30%;
    height: auto;

}

.pneu img:hover{
    transform: rotate(359deg);
    transition: all ease-in-out 0.2s;
    
}



.layer {
    width: 70vw;
    height: 70vw;
    position: absolute;
    color: yellow;
    text-align: center;
    z-index: 2;
    /* background: linear-gradient(rgb(59, 59, 59), gray); */
    border-radius: 4%;
    transition: all ease-in-out 0.5s;
    overflow:hidden;
    cursor: pointer;

    
    
  
   
}
#troisquart{
    z-index: 3;
    position: absolute;
    left: -253% !important;
    margin-top: -246%!important;
    transform: scale(3%)!important ;
}

#tq {
    margin-left: 33%;
    top: 29% !important;
    transform: scale(9);
    width: 8%;
}

#layer1{
    
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter:blur(20px);
     border-radius: 20px;
     border:2px solid white;
     box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    top: 13%;
    left: 50%;
    transform: scale(120%);
    box-shadow:0 0 2px hsl(0, 0%, 100%), 0 0 4px hsl(0, 0%, 100%), 0 0 6px hsl(0, 0%, 100%);
    transform: translateX(-50%) perspective(500px) rotateX(-40deg)
    

}


#layer2{
    transform: scale(40%);
    height: 110vh;
    top: 20%;
    left: 50%;
    z-index: 6;
    overflow: hidden;
    background-color: transparent !important;

    
}

#layer2 img {
    opacity: 1 !important;
}

#layer3{
    top: 60%;
    left: 25%;
   
    
}


#layer4{
    top: 60%;
    left: 60%;
}

#layer5{
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter:blur(25px);
    top: 30%;
    left: 50%;
     border-radius: 20px;
     border:2px solid white;
     box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
     box-shadow:0 0 2px hsl(0, 0%, 100%), 0 0 4px hsl(0, 0%, 100%), 0 0 6px hsl(0, 0%, 100%);
    transform: translateX(-50%) perspective(500px) rotateX(-40deg)
   
 
}

#layer6{
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter:blur(25px);
    top: 50%;
    left: 50%;
     border-radius: 20px;
     border:2px solid white;
     box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
     box-shadow:0 0 2px hsl(0, 0%, 100%), 0 0 4px hsl(0, 0%, 100%), 0 0 6px hsl(0, 0%, 100%);
    transform: translateX(-50%) perspective(500px) rotateX(-40deg)
}

#layer7{
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter:blur(25px);
    top: 70%;
    left: 50%;
     border-radius: 20px;
     border:2px solid white;
     box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
     box-shadow:0 0 2px hsl(0, 0%, 100%), 0 0 4px hsl(0, 0%, 100%), 0 0 6px hsl(0, 0%, 100%);
    transform: translateX(-50%)  perspective(500px) rotateX(-40deg);
    z-index: 3;
}



.fullscreen {
    position: fixed;
    width: 98% !important;
    height: 115% !important;
    top: 0% !important;
    left: 0% !important;
    transform: scale(100%) !important;
    color: black;
    z-index: 100 !important;
    background-color: yellow !important;
    overflow-y: scroll;


}

.fullscreen p{
    color: black !important;
    margin-bottom: 1%;
    width: 95%;
    /* border-radius: 5%; */
    height: fit-content;
    border: solid black 5px;
    padding: 4px;
    font-size: 2rem !important;
}
.fullscreen h1{
    height: fit-content;
    font-size: 4rem !important;
    margin-bottom: 10px;
    border: solid black 5px;
}

.fullscreen img {
    opacity: 1!important;
    margin: -3%;
}


.layer-container {
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 120%;
    overflow: hidden;
    
}

.fullscreen .layer-container {
    position: relative;
    z-index: 100;
}




.layerfullscreen #layer2 {
    background-color: transparent !important;
}
.layer-container p {
    color: transparent;
    font-size: 2rem;
    font-family: 'RiformaLL:Medium', sans-serif;
    text-align: left;
    
  
}
.layer-container img {
    opacity: 0;
    
}

.layer-container h1 {
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    font-size: 2rem;
    font-family: 'luisblack', sans-serif;
    font-weight: 900; 
}

.layer-container #n1 {
   color: red !important;
}
#scaffale {
    margin-top: 35%;
    transform: scale(230%);
}

.conditions {
    top: 87%;
    width: 100%;
    height: 18%;
    background-color: rgb(36, 36, 36);
    color: white;
    position: absolute;
    font-family: 'RiformaLL:Medium', sans-serif;
    font-size: 2vw;
    text-align: center;
}

.conditions p{
    top: 20%;
    margin: 4%;
}


.texture img {
    
    height: 10rem;
    width: auto;
    overflow-y: hidden;
    
    animation: move 1.5s linear infinite;

}

.texture {
    
   
    height: 10%;
    width: 100%;
    
    flex-direction: row;
    overflow-x:hidden;
    
    /* animation: move; */

}

.texture_content {
    display: block;
    transform: translateX(100%);
    animation: move 30s linear infinite;

}

@keyframes move {

    from { transform:translateX(0);

    }

    to { transform:
    translateX(50px) ;}
}

.container2 {
    width: 100%;
    height: 60%;
    top: 70%;
    position: absolute;
    
   
}

.category {
  
    width: 100%;
    height: 45%;
    position: absolute;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    position: fixed;
    z-index: 2;
}



/* .category:hover {
    background-color: black !important;
    color: yellow !important;
} */

.category h1 {
 margin: 3%;
font-family: 'luisblack';
font-size: 10vw;

}


#category1 {
    margin-top: -46%;
    height: 40%;
    width: 10%;
}

/* .btn {
    padding: 10px 60px;
    background: red;
    border: 0;
    outline: none;
    font-family: 'luisblack';
    cursor: pointer;
    font-size: 4vh;
}

.popup {
    width: 400px;
    background: #fff;
    border-radius: 5%;
    position: absolute;
    top: -162%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.1);
    text-align: center;
    padding: 0 30px 30px;
    color: #333;
    visibility: visible;
    transition: transform 0.4s, top 0.4s;
}

.open-popup {
    visibility: visible;
    top: 100% !important;
    width: 100% !important;
    transform: translate(-50%, -50%) scale(1)!important ;

}
.popup h2 {
    margin: 30px 0 10px;
   font-family: 'luisblack';
   font-size: 3vw;
   
}

.popup button {
  width: 100%;
  margin-top: 50px;
  padding: 10px 0;
  background: black;
  color: yellow;
  border: 0;
  outline: none;
  font-size: 18px;
  border-radius: 4px;
  cursor: pointer;

} */

#category2 {
margin-top: 25%;
height: 10%;
background-color: red;
}

.content {
    width: 50vw;
    height: 100%;
    background-color:yellow;
    position: fixed;
    top:0;
    left:0;
    transform: translateY(-100%);
    transition: transform 0.5s ease-in-out;
}

body.switch-on .content {
    transform: translateY(0%);
}

.content.switch-panel {
    background-color: green;
}
/* .left {
    height: 100%;
   background-color: rgb(36, 36, 36);
   color: white;
    border-radius: 20px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    background-color: white;
    border: 3px solid black;
    font-family: 'RiformaLL:Medium', sans-serif;
    text-align: left;
    overflow: scroll;
    position: absolute;

}

.intro {
    height: 40%;
    margin: 20%;
    width: 97%;
    margin: 4%;
    border-bottom: 2px solid black;
}

.left p {
    margin: 4%;
    width: 20%;
} */
.right {
width: 50%;
height: 100%;
left: 20%;
background-color: rgb(36, 36, 36);
border-radius: 20px;

/* background-color: white;
border: 3px */

position: absolute;
font-family: 'RiformaLL:Medium', sans-serif;
}

.right p {
    margin: 4%;
    color: white;
}

/* 
.back {
    
    height: 100%;
    width: auto;
 
} */

.container3 {
    width: 100%;
    height: 60%;
    top: 140%;
    position: absolute;
   
}



.container4 {
    width: 100%;
    height: 60%;
    top: 330%;
    position: absolute;
   
}
.container5 {
    width: 100%;
    height: 60%;
    top: 100%;
    
   
}



.media video {
 width: 100%;
 height: auto;
 left: 4%;
 transform: scale(165%);
 top:20%;
 position: fixed;
 z-index: 0;
}
.media video:hover {

 transform: scale(180%);
 transition-delay: 02s;
 transition-duration: 1s;
 transition-timing-function: ease-in-out;

}
@media screen and (min-width: 400px){
    .layer-container h1 {
        font-size: 11vw !important;
    }
    .forme-t {
        width: 20vw !important;
        }
        .panel-a p{
    
            font-size: 143% !important;
            margin-top: 2%;
        }
        .panel-b p{
    
            font-size: 143% !important;
            margin-top: 2%;
        }
       .btn {
        margin-left: -33%;
       }
       
       
}
    


@media screen and (min-width:670px){
    .category {
        top: 150%;
    }

    #category1 {
        top: 50% !important;
    }

    #category2 {
        margin-top: 90% !important;
    }
    .layer1 {
        top: 50%;
         
    }
    .fullscreen {
        top: 20%;
        width: 100% !important;
        height: 200% !important;
    }
    

    }




@media screen and (min-width: 700px) {
    body{
        background-color: rgb(0, 0, 0);

    }

    .layer {
        width: 65%!important;
        height: 60%;
    }
     .category {
            margin-top: 70%;
             height: 20% }
    


    #layer1{
        top:30%;
    }
    #layer5{
        top:55%;
    }
    #layer6{
        top:80%;
    }

    #layer7{
        top:105%;
     
    }
    .layer-container h1 {
    margin-top: 2rem;
    margin-bottom: 7rem;
    font-size: 3rem;
    font-weight: 900; 
}
    .category {
    top: 30%;
    height: 50%;
}


.fullscreen {
    width: 100% !important;
    height: 147% !important;
}
#category2 {
    margin-top: 60%;

}

#troisquart {
    left: 2% !important;
    margin-top: 130% !important;
    transform: scale(10%) !important;
}
}



@media screen and (min-width: 1000px) {
    #layer1 {
        width: 20%;
        margin-top: 5% !important;
        transform: translateX(-50%) perspective(500px) rotateX(-35deg);

    }
    #layer2 {
    
        margin-top: 50% !important;
       

    }
    #layer5 {
        margin-top: 15% !important;
        transform: translateX(-50%) perspective(500px) rotateX(-35deg);

    }
    #layer6 {
        margin-top: 25% !important;
        transform: translateX(-50%) perspective(500px) rotateX(-35deg);

    }
    #layer7 {
        margin-top: 40% !important;
        transform: translateX(-50%) perspective(500px) rotateX(-35deg);

    }
    #tq {
        transform: scale(7)!important;
        margin-left: 103% !important;
        top: 50%!important;
        
    }

    .pneu img {
       top: 10% !important;
    }
        .container2 {
            margin-top: 15%;
        }
        .container3 {
            margin-top: 50%;
        }
    .layer-container {
        margin: 10%;
        height: fit-content !important;
        
    }
    .layer-container p {
    font-size: 2rem;
    text-align: left;
    }
    .layer-container h1 {
        margin-top: 0% !important;
    margin-bottom: 7rem;
    font-size: 7rem !important;
    font-weight: 900; 
    }
    #category1 {
        top: 115%!important;
    }

    #category2 {
        width: 100%;
        height: 40%;
}
    .category h1 {
        font-size: 1rem;
}
.forme-t {
    transform: scale(250%);
    width: 100%!important;
}
#forme-t2 {
margin-top: 40% !important;
    transform: scale(250%);
}


.fullscreen {
        top: 0%;
        width: 100% !important;
        height: 110% !important;
        overflow-y: scroll!important;
   
}

#layer1.layer.fullscreen {
    top: -18% !important;

}
#layer1.layer.fullscreen h1 {
   margin-bottom: 1rem;
   width: 98.5%;

}
#layer1.layer.fullscreen p {
   width: 98%;

}
#layer1.layer.fullscreen img {
 margin-top: -15%;
margin-bottom: -15%;
}
#layer2.layer.fullscreen {
    top: -130% !important;
    height: fit-content !important;

}
#layer5.layer.fullscreen {
    top: -35% !important;

}
#layer5.layer.fullscreen h1 {
    margin-bottom: 0.7rem;
    width: 98.5%;
 }
#layer5.layer.fullscreen p {
    width: 98%;
}
#layer6.layer.fullscreen {
    top: -50% !important;
   

}
#layer6.layer.fullscreen h1 {
    margin-bottom: 0.7rem;
    width: 98.5%;
 }
#layer6.layer.fullscreen p {
    width: 98%;
}
#scaffale {
    margin-top: 33%;
    height: 10%!important;
   }
#layer7.layer.fullscreen {
    top: -70% !important;

} 

#layer7.layer.fullscreen h1 {
   margin-bottom: 1rem;
   width: 98.5%;

}
#layer7.layer.fullscreen p {
   width: 98%;

}



.fullscreen h1 {
    height: max-content;
    font-size: 1000% !important;
}
.fullscreen p {
    height: fit-content;
    
}


.switch-panel-a .panel-a ,
.switch-panel-b .panel-b {
    height: fit-content!important;
}

.panel-a p, .panel-b p {
    margin-right: 300% !important;
    width: 73%;
    font-size: 3vw!important;
    margin: 2%;
}

.panel {
    width: 500%!important;
    left: 500%!important;
}


.media video {
    width: 100%;
    left: 1%;
    transform: scale(120%)!important;
    top: 3%;
   }

.btn {
    margin-left: 0%;
}
}


.btn-box {

    display: flex;
    width: auto;
}

.forme-t {
    border-radius: 5px;
    
    background-color: rgb(21, 0, 255);

    height: 70%;
    width: 28vw;
    left: -2px;
    clip-path: polygon(80% 0%, 100% 50%, 80% 100%, 0% 100%, 0 50%, 0% 0%);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    
}

#forme-t2 {
    width: 20vw!important;
    clip-path: polygon(80% 0%, 100% 50%, 80% 100%, 0% 100%, 0 50%, 0% 0%);
}

.btn {
    
    /* border-top-right-radius: 100%!important; */
    width: 20%;
    padding: 10px 60px;
    /* border-radius: 5px;
    border: 2px solid white;
    background-color: black;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    box-shadow:0 0 2px hsl(0, 0%, 100%), 0 0 4px hsl(0, 0%, 100%), 0 0 6px hsl(0, 0%, 100%); */
    font-family: 'luisblack';
    color: yellow;
    cursor: pointer;
    font-size: 6vh;

    
    
}




.btn:hover {
    color: white;
}

.panel {
    clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 19% 102%, 0 50%, 19% 0%);
    position: relative;
    z-index: 1000;
    top: -60px;
    left: 340%;
    width: 661%;
    height: 0;
    min-height: 0;
    transition: min-height 0.4s ease-in-out;
    overflow: hidden;
    background-color: blue;
}

.panel-a p {
    margin-top: 2%;
    color: yellow;
    margin-left: 20%;
    margin-right: 10%;
    text-align: left;
}
.panel-b p {
    margin-top: 2%;
    color: yellow;
    margin-left: 20%;
    margin-right: 10%;
    text-align: left ;
}


.switch-panel-a .panel-a ,
.switch-panel-b .panel-b {
    min-height: 180px;
   
    
}