*{margin: 0;padding: 0;box-sizing: border-box;text-decoration: none;list-style: none;letter-spacing: 2px;}
@font-face{font-family: h-logo; font-style: normal; font-display: swap; src: url(./font/RubikDirt-Regular.ttf);}
@font-face{font-family: title; font-style: normal; font-display: swap; src: url(./font/REM-VariableFont_wght.ttf);}
@font-face{font-family: testlogo; font-style: normal; font-display: swap; src: url(./font/Webrush\ Demo.ttf);}
h1,h2,h3,h4{font-family: testlogo;font-weight: 300;}
body{overflow-x: hidden;}
a{color: #fff;}
.header{background: #212121;align-items: center;padding: 0 30px;height: 5vh;}
.header-nav{align-items: center;height: 100%;display: flex;justify-content: space-between;}
.ul{display: flex;gap: 30px;}
li{cursor: pointer;color: #fff;}
li:hover{transition: 0.5s;scale: 1.1;}
.pres{color: #fff;background-size: cover;background-color: #000;height: 50vh;}
.prestation h1{font-size: 5rem;}
.prestation{height: 100%;display: flex;flex-direction: column;justify-content: center;text-align: justify;gap: 70px;}
.title{font-size: 3rem;text-align: center;}
.pres-support{font-size: 1.6rem;text-align: center;padding: 0 50px;}
.pres-infos,.ul, p {font-size: 1.2rem;}
#presta{background: #fff;padding: 70px 0;}
.header-presta{text-align: center;margin: 0 auto 70px;max-width: 1020px;padding: 0 20px;}
h2{font-size: 2.5rem;margin-bottom: 50px;}
.details{display: flex;flex-direction: column;text-align: center;gap: 80px;}
.detail-info{height: 400px;display: flex;gap: 250px;justify-content: center;}
.detail-info img{width: 554px;object-fit: cover;}
h3{font-size: 1.5rem;margin: 50px auto;}
.detail-info p{margin: auto;max-width: 100%;text-align: justify;}
#presentation{background: #212121;color: #fff;padding: 40px 100px;height: 45vh;}
.presentation-info{height: 100%;display: flex;gap: 150px;align-items: center;}
.presentation-info video{height: 100%;object-fit: cover;}
.presentation-info img{border-radius: 10000px;height: 100%;object-fit: cover;}
.presentation-info p{text-align: justify;line-height: 30px;}
#artbook{background-color: #323232;overflow: hidden;padding: 50px 0;}
#artbook h2{text-align: center;color: #fff;}
.slider-wrapper{position: relative;}
.previous,.next{padding: 2px;width: 40px;height: 40px;cursor: pointer;border-radius: 50%;outline: none;border: 3px solid #fff;background-color: #1a1a1a;box-shadow: 0 0 3px #bbb;position: absolute;top: 50%;}
.previous{left: 2%;}
.next{right: 2%;}
#controls i{color: #fff;font-size: 1rem;}
.slide img{width: 100%;height: 500px;cursor: pointer;}
.display{display: none;}
.prestaFlex{max-width: 554px;}
.container-presta{max-width: 50%;margin: 0;}
.slider-presta{height: 100%;display: flex;justify-content: center;}
.slider-presta img{max-width: 100%;border-radius: 15px;display: none;}
img.active{animation: fade 1s;display: block;}
.container{max-width: 80%;margin: 0 auto;}
#popup-bg{display: none;position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background-color: rgb(0 0 0 / 0.8);z-index: 3;justify-content: center;align-items: center;}
#popup-bg.active-pop{display: flex;}
#popup-content{display: flex;justify-content: center;align-items: center;position: relative;}
#popup-img{height: 100vh;}
#contact{background: #212121;color: #fff;padding: 50px 0;text-align: center;}
#contact h2{margin-bottom: 50px;}
.contact-form-infos{display: flex;margin: auto;justify-content: center;max-width: 1400px;height: 550px;padding: 40px;background-color: #2d2d2d;}
.contact-infos{display: flex;justify-content: space-between;flex-direction: column;width: 500px;border-right: 2px solid #212121;}
.contact-infos p{text-align: left;}
.contact-infos h3,.contact-form h3{margin-top: 0;}
.contact-infos ul{margin-top: 50px;justify-content: center;}
.contact-form{width: 900px;}
form{padding: 0 50px;text-align: left;display: flex;flex-direction: column;}
input{height: 30px;padding: 10px;border-radius: 8px;border: none;background: #e6e6e6;}
label{margin: 8px 10px;}
textarea{resize: none;background: #e6e6e6;border-radius: 8px;border: none;margin-bottom: 10px;height: 100px;padding: 10px;}
.confirm{padding: 0;cursor: pointer;margin: 20px auto 0;height: 30px;width: 110px;}
footer{background: #191919;color: #fff;min-height: 50px;margin: auto;display: flex;justify-content: center;align-items: center;padding: 15px;}
footer p{font-size: 1rem;text-align: justify;}
.details{overflow: hidden;}
@media screen and (max-width: 1683px){#presentation {padding: 40px 50px;}}
@media screen and (max-width: 1662px){.detail-info{gap: 120px;}}
@media screen and (max-width: 1583px){.presentation-info{gap: 80px;}}
@media screen and (max-width: 1443px){.presentation-info p{line-height: normal;}}
@media screen and (max-width: 1350px){.prestation h1{font-size: 4rem !important;}.pres-support{font-size: 1.3rem;}}
@media screen and (max-width: 1313px){.presentation-info img{height: 250px;}.presentation-info video{height: 250px;}p{font-size: 1.1rem !important;}}
@media screen and (max-width: 1250px){.prestaFlex{width: 450px;}.detail-info {height: 350px;}.prestaFlex h3{margin: 20px 0;}.detail-info p{padding: 0 20px;}h3{font-size: 1.2rem;}.container-presta{width: 450px;}.slide img{height: 500px;}.presentation-info img{height: 225px;}.presentation-info video{height: 225px;}}
@media screen and (max-width: 1150px){h1{font-size: 2.5rem !important;}.pres-support{font-size: 1.5rem;}.prestation{padding: 50px 20px;}.detail-info{gap: 50px;}.container-presta{width: 425px;}.prestaFlex h3{margin: 30px auto;}#popup-img{height: 75vh;}p{font-size: 1.05rem !important;}.presentation-info img{height: 200px;}.presentation-info video{height: 200px;}.presentation-info{gap: 50px;}}
@media screen and (max-width: 1024px){.pres{display: flex;justify-content: center;}footer p{font-size: 0.8rem;}.pres{height: 100vh;}#presentation{height: auto;}.presentation-info{flex-direction: column;}.presentation-info img{height: 225px;}.presentation-info video{height: 225px;}}
@media screen and (max-width: 900px){.detail-info P{width: 100% !important;}.detail-info p{max-width: 500px;}.container-presta{width: 400px;}.prestaFlex{width: 350px;}.detail-info{height: 350px;}.detail-info img{height: auto;}.logo p{font-size: 4.2rem;}#popup-img{height: 65vh;}.slider-presta img{min-height: 300px !important;min-width: 400px !important;}}
@media screen and (max-width: 854px){.logo p{font-size: 5rem !important;}.slide img{height: 400px;}.details{gap: 100px;}.detail-info:nth-child(2){flex-direction: column-reverse;}.detail-info:nth-child(4){flex-direction: column-reverse;}.detail-info{height: auto;flex-direction: column;align-items: center;gap: 0;}.prestaFlex{width: 400px;}.prestaFlex p{padding: 0;}.prestaFlex h3{margin: 20px 0 !important;}.slider-presta img{height: 300px !important;width: 375px !important;}}
@media screen and (max-width: 788px){.logo p{font-size: 4.5rem !important;}}
@media screen and (max-width: 768px){.prestation{max-width: 100%;margin: auto;}#popup-img{height: 55vh;}}
@media screen and (max-width: 720px){.contact-form-infos{flex-direction: column;height: auto;}.contact-infos{border-right: none;border-bottom: 2px solid #212121;width: auto;gap: 30px;padding: 0 50px 20px;}.contact-form{margin-top: 20px;width: 100%;}.logo p{font-size: 3.5rem !important;}}
@media screen and (max-width: 660px){.slide img{height: 350px;}#popup-img{height: 45vh;}.prestation h1{font-size: 3rem !important;}}
@media screen and (max-width: 600px){.header{padding: 0 10px;}.display-nav{display: none;}.header-nav{justify-content: center;}.header-nav ul{gap: 0;width: 100%;justify-content: space-between;}.contact-form-infos{padding: 40px 0;}}
@media screen and (max-width: 570px){.slide img{height: 300px;}}
@media screen and (max-width: 550px){#popup-img{height: 35vh;}}
@media screen and (max-width: 430px){h1{font-size: 2rem !important;}.slide img{height: 250px;}.prestaFlex p{width: 350px !important;}}
@media screen and (max-width: 376px) {.logo p{font-size: 2.3rem !important;}}