/*
@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: #f42727;
  }

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

body{
    font-family: 'sequel';
    color:  var(--contrast);
    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;
}
#main{
	height: 100dvh;
    width: 100vw;
    overflow: hidden;
    background: var(--globalcolor) url(../img/emusic.jpg) no-repeat right / contain;
}

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


#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(--alternative);
    padding-bottom: 150px;
    text-align: center;
}

#tournee b {
    color: var(--globalcolor);
    text-shadow: 1px 1px var(--alternative), -1px -1px var(--alternative), 1px -1px var(--alternative), -1px 1px var(--alternative);
}

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

.disc:hover {
    border: 2px solid var(--alternative);
}

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

#emusic{
    background: url(../img/music/emusic.jpg) no-repeat center / cover
}
#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: -2px;
    left: -2px;
    width: 20px;
    padding: 20px;
    background-color: var(--globalcolor);
    color: var(--alternative);
    border: 2px solid var(--alternative);
    opacity: 0;
}

h4{
    font-size: 15vw;
    font-weight: 600;
    line-height: 1em;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    color: var(--alternative);
    margin: 150px auto 50px auto;
}

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

#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: 90dvw;
    height: 55dvw;
    background-color: rgba(224, 228, 230, 0.3);
    text-align: left;
    border: 2px solid var(--globalcolor);
}


.product:hover{
    border: 2px solid var(--alternative);
}
.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;
}

#header a {
    display: block;
    margin: 0;
    font-size: 3vw;
    line-height: 1em;
    text-transform: uppercase;
    color: var(--alternative);
}

.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%;
}

#global {
    background-image: url(../img/merch/global.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


.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);
}
#newsletter {
    display: inline-block;
    font-size: 14px!important;
    border: 2px solid var(--alternative);
    width: auto!important;
    height: auto!important;
    padding: 7px 15px 5px 15px!important;
    vertical-align: middle;
    margin-left: 30px!important;
}

#main #header {
    width: 96%;
    margin: 5% auto auto 4%;
    font-size: 18px;
    text-align: left;
    font-family: 'sequel';
    transform: rotate(-3deg);}


.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: var(--alternative)fff22;
    max-width: 1080px;
    width: 90%;
    margin: 50px auto;
}

#menu{
    display: block;
    bottom: 60px;
    margin: 3dvh 0;
}

#menu a{
    display: inline-block;
    text-transform: uppercase;
    font-weight: bold;
    padding: 0;
    font-size: 8dvw;
    line-height: 0.85em;
}

#menu a:hover{
    opacity: .5;
}

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

#logo {
    display: block;
    margin: 0;
    background-image: url(../img/logo.svg?rld);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 8dvw;
    height: 6vw;
}

#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{
    display: inline-block;
    width: fit-content;
    text-align: center;
    vertical-align: middle;
    z-index: 5;
}





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;
}
    #social a, #listen a{
        width: 35px;
        height: 30px;
        transition: 0.2s;
        display: inline-block;
        text-decoration: none;
        vertical-align: middle;
        padding: 0 0 10px 0;
        border-radius: 50px;
        opacity: 1;
    }
    #social a:hover, #listen a:hover{
        opacity: 0.5;
    }

.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) {
    #main{
        background: var(--globalcolor) url(../img/emusic.jpg) no-repeat top / contain;
    }
    #main #header {
        width: 96%;
        margin: 90% auto auto 2%;
    }
    #menu a {
        font-size: 13dvw;
    }
    #menu {
        margin: 10px 0 0 0;
    }
    #logo {
        width: 15dvw;
        height: 10dvw;
    }
    #newsletter {
        font-size: 10px !important;
        margin-left: 8px !important;
    }
}