@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700;800&display=swap');

body,html{margin:0;padding:0;
    font-family: 'Montserrat', sans-serif;

} *{box-sizing:border-box}
:root{--ciColor:rgb(8, 92, 229)}

.container{position: absolute; width:100%;height:100vh;left:0;top:0; overflow: hidden;}
.loader{position: fixed;width:100%;height:100vh;left:0;top:0; display:flex;align-items:center; justify-content:center; background-color: black;}
.loader img{ width: 100px;}

.btn{width: 40px;height: 40px; border:2px solid white; border-radius: 100px; cursor: pointer;  padding: .7rem; display:flex;align-items:center; justify-content:center; z-index: 100 !important; opacity: .5; transition: opacity .5s, border-radius .5s, width .5s, height .5s; background-image: url("../img/w54.svg"); background-size: 80%; background-position: center 60%; background-repeat: no-repeat;
animation: btloop 1s infinite alternate;
}

@keyframes btloop{
from{opacity: .5; width: 40px;height: 40px; background-size: 80%;}
to{opacity: 1; width: 80px;height: 80px; background-size: 60%;}


}


.categorie div{color:white; font-weight: bold; 
    /* filter:
    drop-shadow(0 0 10px black)
    drop-shadow(0 0 20px black)
    drop-shadow(0 0 30px rgba(0, 0, 0, 0.584))
    drop-shadow(0 0 70px rgba(0, 0, 0, 0.478)) */
    ;}
.btn:hover{ z-index: 10000 !important;opacity:1; background-color: transparent;
    /*  width: 200px; height: 100px; border-radius: 0px;  */}
.btn:hover h1{opacity: 1; transform: scale(1);}
.viewer{ margin: auto; left: 0;top: 0;position: fixed; inset: 2rem; background-color: rgba(0, 0, 0, 0.8); z-index: 10000; color: white; padding: 2rem; display:flex;align-items:center; justify-content:center}
.viewer p{max-width: 600px;}
iframe{all:unset; width: 100%;height: 100%;}

.close,.download{position: fixed; top: 0; right: 0;padding: 1rem;background-color: black; color:white; cursor: pointer; font-size: 2rem; }
.download{top:auto; bottom:0 }

.slider{width: 300%;height: 100%; display: flex;position: absolute; color:white}
.slider > div{width: 100%; height: 100vh;}

a{all:unset}

.menu{display:flex;align-items:center; justify-content:center; }
.menu div{display: flex;width: 100%;flex-direction: column;}
.menu div h1{padding: 2rem; text-align: center; font-size: 2rem;}
.videoBtn,.slidesBtn{font-size: 8rem;}
.menu div div{display:flex;align-items:center; justify-content:center}
@media(min-width:600px){
    .menu div{flex-direction: row; width: 90%;}
    .menu div h1{font-size: 3rem;}
    .viewer{ background-color: rgba(0, 0, 0, 0.3);  backdrop-filter: blur(20px);}
}

i{transition: all .5s; transform: scale(.5); cursor: pointer;}
i:hover{transform: scale(.8);}

video,.slides img{width: 100%;height: 100%;object-fit: contain; object-position: center;}
.slides{position: relative; overflow: hidden;}
.slides img{position: absolute; left: 0;top: 0;}

.next,.prev{position: absolute; top: 50%; transform: translateY(-50%);right: 0; width:20px;height:20px; background-color: black; padding: 1rem; color:white; font-size: 2rem; display:flex;align-items:center; justify-content:center}
.prev{left: 0;right: auto;}
.slide{left: 100%; transition: left 1s; position: absolute; width:100%;height:100%;top:0}
.active{left: 0;}
.previous{left:-100%}