/*
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap');
*/

@font-face {
    font-family: 'sequel';
    src: url('../font/sequel.woff2') format('woff2'),
         url('../font/squel.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
* {
	margin:0;
	padding:0;
}

:root {
    --globalcolor:  #fff;
    --contrast:  #000;
    --alternative: #911f10;
  }

::selection {
    background: var(--contrast);
    /* background color BKP : 604be3 */
    color:  var(--globalcolor);
}

body{
    background-color:#000;
    font-family: 'sequel';
    color:  var(--globalcolor);
    position: absolute;
    width: 100%;
    height: 100%;
}

svg {
    fill:var(--globalcolor);
}

#annonce{
    position: absolute;
    font-family: 'sequel';
    font-size: 12px;
    right:50px;
    margin:0 auto;
    top: 50vh;
    transform: translateY(-50%);
    text-align: center;
    z-index: 90;
}

#annonce #single, #annonce #album{
    padding: 15px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    margin-top: 15px;
}

#annonce #single:hover a, #annonce #album:hover a{
    border: 1px solid var(--globalcolor);
}

#annonce h1{
    display: block;
    font-size: 30px;
    font-weight: lighter;
    margin: 5px auto;
    font-family: 'sequel';
}

#annonce p{
    display: block;
    font-size: 10px;
    letter-spacing: 0.1em;
    font-weight: lighter;
    text-transform: uppercase;
    font-family: 'sequel';
}
#annonce a{
    display: inline-block;
    border: 1px solid rgba(255,255,255,0.2);
    padding: 5px 0;
    width: 100%;
    color:  var(--globalcolor);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 25px;
}
#annonce a:hover{
    background-color: var(--globalcolor);
    color: black;
}


#video {
    overflow: hidden;
    min-width: 100vw;
    min-height: 100dvh;
}
#video video{
    min-width: 100vw;
    min-height: 100dvh;
}

  .videoWrapper {
	  position: relative;
	  height: 100dvh;
      width: 100vw;
      overflow: hidden;
  }

.videoWrapper iframe {
    position: absolute;
    top: -20dvh;
    left: -125vw;
    width: 350%;
    height: 150dvh;
    z-index:1;
}

#mute-video{
    cursor: url(../img/unmute.svg), auto;
    position: absolute;
    top:0;
    width:100%;
    height:100%;
    z-index:2;
}
 
#controls{
    display: inline-block;
    width: calc(50% - 10px);
    min-width: 270px;
    margin-top: 15px;
    text-align: left;
}

#sound{
    background-image: url(../img/mute.svg);
    position: absolute;
    background-size: 30px;
    z-index: 99;
    color: white;
    text-align: left;
    bottom: calc(47px + 2vw);
    right: 2vw;
    width: 60px;
    height: 60px;
    backdrop-filter: blur(15px);
    background-color: rgba(127,127,127, 0.2);
    border-radius: 300px;
    border: 1px solid #ffffff22;
}
#sound:hover{
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.4);
}

input[type = "checkbox"] {
    display: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

input[type = "checkbox"]:checked ~ #sound {
    background-image: url(../img/unmute.svg);
}


#videoMobile{
    display: none;
}

#main{
	height: 100dvh;
    width: 100vw;
    overflow: hidden;
}

#shop, #music {
    position: relative;
    z-index: 99;
    padding: 50px 0 calc(100px + 10vw) 0;
    background-color: var(--globalcolor);
    text-align: center;
}
#shop {
    position: relative;
    z-index: 99;
    padding: 50px 0 0 0;
    background-color: var(--globalcolor);
    text-align: center;
}


#tournee {
    color: var(--globalcolor);
    padding: 150px 0;
    text-align: center;
}

#tournee b {
    color: var(--alternative);
}

.disc{
    position: relative;
    background-color: #eee;
    display: inline-block;
    width: 49dvw;
    height: 49dvw;
    margin: 2px auto;
    background-size: cover;
    border: 1px solid #ddd;
}

.disc:hover {
    border: 1px solid #555;
}

.disc:hover .play{
    opacity: 1;
    transition: 0.1s;
}


#si{
    background: url(../img/music/si.jpg) no-repeat center / cover
}

#sign{
    background: url(../img/music/sign.jpg) no-repeat center / cover
}

#signal{
    background: url(../img/music/signal.jpg) no-repeat center / cover
}

#signalii{
    background: url(../img/music/signalii.jpg) no-repeat center / cover
}

#etrap{
    background: url(../img/music/etrap.jpg) no-repeat center / cover
}

#algorithme{
    background: url(../img/music/algorithme.jpg) no-repeat center / cover
}

.play{
    transition: 0.1s;
    position: absolute;
    bottom: -1px;
    left: -1px;
    width: 20px;
    padding: 20px;
    background-color: var(--globalcolor);
    color: var(--contrast);
    border: 1px solid #999;
    opacity: 0;
}

h4{
    font-size: 15vw;
    font-weight: 600;
    line-height: 1em;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    color: var(--globalcolor)
}

#tournee a {
    display: block;
    text-transform: uppercase;
    color: var(--globalcolor);
    border-bottom: 1px solid #ddd;
    padding: 25px 0;
    width: 90%;
    max-width: 720px;
    margin: 0 auto;
}
#tournee a:hover {
    background: #111;
}

#dates {
    max-width: 750px;
    margin: 0 auto;
    margin-top: -50px;
}

#tournee .wrapper{
  overflow: hidden;
}

.bit-rsvp{
    display: none!important;
}

#content{
    display: block;
    background-color: white;
    width: 90vw;
    padding: 5vh 3vw;
    margin: 150px auto 0 auto;
}


.product{
    display: inline-block;
    vertical-align: top;
    margin: 2px auto;
    width: calc(50dvw - 60px);
    padding: calc(49dvw - 50px) 25px 25px  25px;
    background-color: rgba(224, 228, 230, 0.5);
    text-align: left;
}

.product:hover{
    background-color: rgba(224, 228, 230, 0.2);
}
.soldout{
    opacity: 0.2;
}
.soldout::after{
    content:'SOLDOUT';
    position: relative;
    color: var(--globalcolor);
    background-color: var(--contrast);
    transform: rotate(-7deg);
    display: inline-block;
    top: -100%;
    left: 0;
    font-size: 2em;
    vertical-align: top;
    text-align: right;
}
h2 {
    display: block;
    margin: 35px auto 25px auto;
    line-height: 0.8em;
    font-size: 4em;
    text-transform: uppercase;
    color: var(--globalcolor);
}

.product p{
    display: inline-block;
    margin: 0;
    line-height: 1em;
    font-size: 1.2em;
    text-transform: uppercase;
    color: var(--contrast);
}



#vinyleETRAPblue {
    background-image:  url(../img/merch/etrap-vinyl-blue.png?rld2);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}



#algorithmecd {
    background-image: url(../img/merch/algorithmecd.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
#algorithmepack1 {
    background-image: url(../img/merch/algorithmepack1.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
}
#algorithmepack2 {
    background-image: url(../img/merch/algorithmepack2.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
}


#pokemonpack {
    background-image: url(../img/merch/pokemon-pack.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 75%;
}
#algorithmepack {
    background-image: url(../img/merch/algorithmepack.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 75%;
}
#pillspack {
    background-image: url(../img/merch/pillspack.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 75%;
}
#algorithmecle {
    background-image: url(../img/merch/algorithmecle.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 75%;
}


.picture{
    height: 330px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#album .picture{
    background-image: url(../img/album.png);
}


#facebook{
    background-image:url(../img/fb.svg?rld);
}
#spotify{
    background-image:url(../img/sp.svg?rld);
}
#deezer{
    background-image:url(../img/de.svg?rld);
}
#apple{
    background-image:url(../img/am.svg?rld);
}
#amazon{
    background-image:url(../img/az.svg?rld);
}
#songkick{
    background-image:url(../img/sk.svg?rld);
}
#twitter{
    background-image:url(../img/tw.svg?rld);
}
#instagram{
    background-image:url(../img/ig.svg?rld);
}
#tiktok{
    background-image:url(../img/tt.svg?rld);
}
#youtube{
    background-image:url(../img/yt.svg?rld);
}
#soundcloud{
    background-image:url(../img/sc.svg?rld);
}

#main #header {
    position:absolute;
    z-index: 6;
    left: 50%;
    transform: translateY(-50%)  translateX(-50%);
    top: 50%;
    width: 100%;
    max-width: 1080px;
    font-size: 18px;
    text-align: center;
    font-family: 'sequel';
}

#main #header img {
    width: 90%;
    max-width: 720px;
    margin: 30px auto;
}

.bouton {
    display: inline-block;
    color: var(--alternative);
    border: 2px solid var(--alternative);
    border-radius: 50px;
    padding: 10px 35px;
}
.bouton:hover {
    color: var(--globalcolor);
    border: 2px solid var(--globalcolor);
}

#secondaire #header {
    margin: 25px auto 0 auto;
    width:100%;
    max-width:400px;
    font-size: 18px;
    text-align: center;
    font-family: 'sequel';
}
#contentDetail{
    padding: 50px 3%;
    background-color: #ffffff22;
    max-width: 1080px;
    width: 90%;
    margin: 50px auto;
}
#menu{
    /*
    backdrop-filter: blur(15px);
    */
    width: fit-content;
    margin: 0 auto;
    border-radius: 5px;
    padding: 2px;
    position: absolute;
    z-index: 5;
    bottom: 60px;
}

#menu a{
    display: block;
    text-transform: uppercase;
    color:  var(--globalcolor);
    font-weight: bold;
    padding: 0 15px;
    font-size: 5em;
    line-height: 0.8em;
    letter-spacing: -0.05em;
}

#menu a:hover{
    font-style: italic;
}

.externalLink{
    background-image: url(../img/externallink.svg);
    background-position: 90% 48%;
    background-repeat: no-repeat;
    background-size: 15px;
}

#logo{
    display: block;
    margin: 0 auto;
    background-image:url(../img/logo.svg?rld);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width:100%;
    max-width:400px;
    height:100px;
}

#listenBtn{
    background-image: url('../img/listen.svg');
    width: 120px;
}
#watchBtn{
    background-image: url('../img/watch.svg');
    width: 100px;
}
#tourBtn{
    background-image: url('../img/tour.svg');
    width: 90px;
}
#storeBtn{
    background-image: url('../img/store.svg');
    width: 95px;
}
#artBtn{
    background-image: url('../img/art.svg');
    width: 80px;
}

#store:hover{
    transition: 0.1s;
    margin-right: 10px;
}
#store{
    transition: 0.5s;
    display: block;
    font-weight: bold;
    padding: 5px 0;
    color: #111;
    position: fixed;
    right: 20px;
    top:20px;
}


#artwork{
    transition:0.5s;
    display: inline-block;
    margin:10px auto;
    width:200px;
    height:200px;
    background-image:url(../img/cover.jpg);
    background-position:center center;
    background-repeat:no-repeat;
    background-size:100%;
    background-color: var(--globalcolor);
    border-radius:3px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px,
                rgba(0, 0, 0, 0.2) 0px 4px 4px,
                rgba(0, 0, 0, 0.2) 0px 8px 8px,
                rgba(0, 0, 0, 0.2) 0px 16px 16px,
                rgba(0, 0, 0, 0.2) 0px 32px 32px,
                rgba(0, 0, 0, 0.2) 0px 64px 64px;
}



#links{
    width: 100%;
    text-align: center;
    z-index: 5;
}



#newsletter{
    width: 280px;
    display: block;
    margin: 0 auto;
    vertical-align: middle;
    text-align: center;
    border: 2px solid var(--globalcolor);
    background-color: rgba(0,0,0,0.3);
    border-radius: 50px;
-webkit-box-shadow:0px 0px 105px 20px rgba(255,255,255,0.9);
-moz-box-shadow: 0px 0px 105px 20px rgba(255,255,255,0.9);
box-shadow: 0px 0px 105px 20px rgba(255,255,255,0.9);
}

#newsletter:hover{
    background-color: rgba(0,0,0,0.5);
}
#newsletter form{
	display: inline-block;
	width: 280px;
	margin: 0 auto;
}
#newsletter input, #newsletter button{
	background-color: transparent;
	border: none;
    color: var(--globalcolor);
    font-family: 'sequel';
}
#newsletter input{
    display: inline;
    font-size: 12px;
    padding: 15px;
    letter-spacing: 0.02em;
    width: 180px;
}
#newsletter input::placeholder{
    color: rgba(255,255,255,0.8);
}
#newsletter button{
    display: inline;
	padding: 15px 25px 15px 15px;
    font-size: 14px;
    width: 50px;
    color: var(--globalcolor);
    font-family: 'sequel';
    text-transform: uppercase;
}





h3 {
    font-size: 14px;
    text-transform: uppercase;
    margin-bottom: 15px;
}



.mentions {
    font-size: 10px;
    font-style: italic;
    opacity: 0.5;
    font-family: 'sequel';
    font-weight: normal;
    line-height: 1em;
    margin-top: 15px;
}


#social{
    display: block;
    vertical-align: middle;
    text-align: center;
    margin-top: 10px;
}
    #social a, #listen a{
        width: 40px;
        height: 35px;
        transition: 0.2s;
        display: inline-block;
        text-decoration: none;
        padding: 0 0 10px 0;
        border-radius: 50px;
        opacity: 0.5;
    }
    #social a:hover, #listen a:hover{
        opacity: 1;
    }

.icon{
    background-position: center center;
    background-size: 30px;
    background-repeat: no-repeat;
}

a{
    text-decoration: none;
}

.lien{
    text-transform: uppercase;
    color:  var(--globalcolor);
    letter-spacing: 0.2em;
}
.overlay a{
    transition: 0.5s;
    text-decoration: none;
    color:  var(--globalcolor);
    font-size: 14px;
    display: inline-block;
    margin: 10px auto;
    letter-spacing: 0.2em;
}
.overlay .lien:hover a{
    transition: 0.1s;
    letter-spacing: 0.5em;
}

.overlay h1{
    text-transform: uppercase;
    margin-top: 75px;
}


#footer{
    position: relative;
    z-index: 60;
    width: 100vw;
    padding: 50px 0;
    font-family: 'sequel';
    background-color: #000;
}

#mentionsLegales{
    text-align: center;
    opacity: 0.2;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
#mentionsLegales h1{
    color: var(--globalcolor);
    text-align: center;
    font-weight: lighter;
    margin: 0 auto;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
#logoFooter{
        height:50px;
        opacity: 0.2;
        margin: 25px auto 0 auto;
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        background-image:url(../img/logo.svg);
    }
    #socialFooter{
        margin: 10px auto;
        text-align: center;
    }
    #socialFooter a{
        transition:0.5s;
        border-radius: 3px;
        width:40px;
        height:35px;
        transition:0.2s;
        display:inline-block;
        text-decoration:none;
        opacity: 0.2;
    }

    #socialFooter a:hover{
        opacity: 1;
    }





    #cookie {
        position: absolute;
        bottom: 20px;
        width: 100%;
        text-align: center;
        margin: 0 auto;
    }
    #cookie a {
        color: var(--background);
        text-decoration: none;
        font-size: 0.6em;
        text-transform: uppercase;
        margin: 0 5px;
        opacity: 0.2;
    }
    #cookie a:hover {
        opacity: 1;
    }











  #soundBtn {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 48px;
    height: 48px;
    padding: 6px;
    border-radius: 8px;
    border: none;
    background: rgba(0,0,0,0.3);
    border: 2px solid var(--globalcolor);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
    #soundBtn svg {
        width:100%; height:100%; pointer-events:none;
    }









.shine {
    -webkit-animation: SHINE 1s ease-in-out infinite; 
    -moz-animation:    SHINE 1s ease-in-out infinite; 
    -o-animation:      SHINE 1s ease-in-out infinite; 
    animation:         SHINE 1s ease-in-out infinite;
}

@-webkit-keyframes SHINE {
    0%   { 
-webkit-box-shadow:0px 0px 100px 15px rgba(255,255,255,0.3);
-moz-box-shadow: 0px 0px 100px 15px rgba(255,255,255,0.3);
box-shadow: 0px 0px 100px 15px rgba(255,255,255,0.3);
    }
    80%   {
-webkit-box-shadow:0px 0px 105px 20px rgba(255,255,255,0.9);
-moz-box-shadow: 0px 0px 105px 20px rgba(255,255,255,0.9);
box-shadow: 0px 0px 105px 20px rgba(255,255,255,0.9); 
}
    100%   {
-webkit-box-shadow:0px 0px 100px 15px rgba(255,255,255,0.3);
-moz-box-shadow: 0px 0px 100px 15px rgba(255,255,255,0.3);
box-shadow: 0px 0px 100px 15px rgba(255,255,255,0.3);
}
}
  @-moz-keyframes SHINE {
    0%   { 
-webkit-box-shadow:0px 0px 100px 15px rgba(255,255,255,0.3);
-moz-box-shadow: 0px 0px 100px 15px rgba(255,255,255,0.3);
box-shadow: 0px 0px 100px 15px rgba(255,255,255,0.3);
    }
    80%   {
-webkit-box-shadow:0px 0px 105px 20px rgba(255,255,255,0.9);
-moz-box-shadow: 0px 0px 105px 20px rgba(255,255,255,0.9);
box-shadow: 0px 0px 105px 20px rgba(255,255,255,0.9); 
}
    100%   {
-webkit-box-shadow:0px 0px 100px 15px rgba(255,255,255,0.3);
-moz-box-shadow: 0px 0px 100px 15px rgba(255,255,255,0.3);
box-shadow: 0px 0px 100px 15px rgba(255,255,255,0.3);
}
}
  @-o-keyframes SHINE {
    0%   { 
-webkit-box-shadow:0px 0px 100px 15px rgba(255,255,255,0.3);
-moz-box-shadow: 0px 0px 100px 15px rgba(255,255,255,0.3);
box-shadow: 0px 0px 100px 15px rgba(255,255,255,0.3);
    }
    80%   {
-webkit-box-shadow:0px 0px 105px 20px rgba(255,255,255,0.9);
-moz-box-shadow: 0px 0px 105px 20px rgba(255,255,255,0.9);
box-shadow: 0px 0px 105px 20px rgba(255,255,255,0.9); 
}
    100%   {
-webkit-box-shadow:0px 0px 100px 15px rgba(255,255,255,0.3);
-moz-box-shadow: 0px 0px 100px 15px rgba(255,255,255,0.3);
box-shadow: 0px 0px 100px 15px rgba(255,255,255,0.3);
}
}
  @keyframes SHINE {
    0%   { 
-webkit-box-shadow:0px 0px 100px 15px rgba(255,255,255,0.3);
-moz-box-shadow: 0px 0px 100px 15px rgba(255,255,255,0.3);
box-shadow: 0px 0px 100px 15px rgba(255,255,255,0.3);    }
    80%   {
-webkit-box-shadow:0px 0px 105px 20px rgba(255,255,255,0.9);
-moz-box-shadow: 0px 0px 105px 20px rgba(255,255,255,0.9);
box-shadow: 0px 0px 105px 20px rgba(255,255,255,0.9); 
}
    100%   {
-webkit-box-shadow:0px 0px 100px 15px rgba(255,255,255,0.3);
-moz-box-shadow: 0px 0px 100px 15px rgba(255,255,255,0.3);
box-shadow: 0px 0px 100px 15px rgba(255,255,255,0.3);
}
}







@media screen and (max-width: 700px) {
    h2 {
        font-size: 3em;
    }
}