@import url('https://fonts.googleapis.com/css?family=Work+Sans:400,900&display=swap');

*{
    margin:0;
    padding:0;
}

::selection {
    background: #fcda9a;
    color: #0f233e;
}

body{
    background: #0f233e;
    font-family: 'Work Sans', sans-serif;
    text-align: center;
}

#logo{
    background-image:url(../img/logo.png);
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    width: 90%;
    height: 320px;
    max-width: 760px;
    margin: 50px auto 0 auto;
}

#links{
    position: absolute;
    top: 250px;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 5;
}

#subscribe{
    z-index: 20;
    text-align: left;
    padding-bottom: 20px;
    margin-bottom: 5px;
    width: 100%;
    border-bottom: 1px solid  var(--globalcolor);

}
    #social a, #listen a{
        transition: 0.5s;
        width: 50px;
        height: 50px;
        transition: 0.2s;
        display: inline-block;
        text-decoration: none;
        border-radius: 30px;
        background-size: 85%;
    }
    #social a:hover, #listen a:hover{
        transition: 0.1s;
        background-size: 100%;        
    }

.icon{
    background-position: center center;
    background-size: 95%;
    background-repeat: no-repeat;
}

a{
    text-decoration: none;
}

.lien{
    text-transform: uppercase;
    color:  var(--globalcolor);
    letter-spacing: 0.2em;
}

#newsletter form{
	background-color: white;
	display: inline-block;
	width: 300px;
	margin: 0 auto;
	border-radius: 50px;
}
#newsletter input, #newsletter button{
	background-color: transparent;
	border: none;
    font-family: Arial, Helvetica, sans-serif;
}
#newsletter input{
    display: inline;
    font-size: 12px;
    padding: 15px;
    letter-spacing: 0.02em;
    width: 180px;
}
#newsletter button{
    display: inline;
	padding: 15px 25px 15px 15px;
    font-size: 14px;
    width: 50px;
    color: black;
    text-transform: uppercase;
}

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



.end::after{
    content: 'End of stock!';
    background-color: #fc9d9a;
    position: relative;
    top: -100px;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 10px;
    text-transform: uppercase;
}
.new::after{
    content: 'New!';
    background-color: #fcda9a;
    position: relative;
    top: -100px;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 10px;
    text-transform: uppercase;
}


#products{
    margin:0 auto;
    width: calc(90vw - 10px);
    padding: 50px 5px;
    border-radius: 5px;
    text-align: center;
    background-color: white;
}

.product{
    transition:0.4s;
    background-color:rgba(255,255,255,0);
    padding: 0 20px 20px 20px;
    margin: 8px 5px;
    vertical-align: middle;
    width: 300px;
    height: 480px;
    border-radius: 5px;
    display: inline-block;
}

.product:hover{
    transition:0.1s;
    background-color:rgba(0,0,0,0.05);
}

a{
    text-decoration:none;
    color:#0f233e;
    display: inline-block;
    margin: 0 auto;
}

#products a{
    text-decoration:none;
    color:#0f233e;
    display: inline-block;
    margin: 8px 6px;
}

.soldout{
    opacity: 0.4;
}

.picProduct{
    height:400px;
    width:100%;
    background-repeat:no-repeat;
    background-position:center center;
}

.textProduct{
    margin:0 35px;
}

.title{
    font-weight:bold;
    text-transform:uppercase;
    font-size: 18px;
}

.details{
    text-transform:uppercase;
    letter-spacing: 0.1em;
    font-size:10px;
    margin: 5px auto;
}

.price{
    font-weight:normal;
    text-transform: uppercase;
    font-size:20px;
}

#because{
    background-image:url(../img/because.svg);
    background-size:cover;
    width:50px;
    height:60px;
    margin:25px auto 50px auto;
    opacity:0.3;
}

#album .picProduct{
    background-image:url(../img/vinyl.png);
    background-size:300px;
}
#jacket .picProduct{
    background-image:url(../img/jacket.png);
    background-size:300px;
}
#tshirt .picProduct{
    background-image: url(../img/tshirt.png);
    background-size: 300px;
}
#whitetee .picProduct{
    background-image: url(../img/whitetee.png);
    background-size: 300px;
}

#shoppingbag .picProduct{
    background-image:url(../img/shoppingbag.png);
    background-size:300px;
}

#patch .picProduct{
    background-image:url(../img/patch.png);
    background-size:220px;
}

#slipmat .picProduct{
    background-image:url(../img/slipmat.png);
    background-size:280px;
}

#footer{
    position: relative;
    z-index: 60;
    width: 100vw;
    padding: 50px 0;
    font-family: Arial, Helvetica, sans-serif;
}

#mentionsLegales{
    text-align: center;
    opacity: 0.2;
    font-size: 8px;
    margin-top: 25px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #fcda99;
}

#mentionsLegales h1{
    text-align: center;
    font-weight: lighter;
    margin: 0 auto;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
#logoFooter{
        height:80px;
        opacity: 0.2;
        margin: 25px auto 0 auto;
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        background-image:url(../img/logoalt.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;
    }



.product:hover p{
    color: #0f233e;
}

#bandeauDefilant{
    position: fixed;
    bottom: 0;
    min-width: 6000px;
    padding: 2px 0 4px 0;
    vertical-align: middle;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
    background: linear-gradient(0.25turn, #fd5001, #f6bc02);
    -webkit-animation: DEFILE 60s linear infinite; /* Safari 4+ */
    -moz-animation:    DEFILE 60s linear infinite; /* Fx 5+ */
    -o-animation:      DEFILE 60s linear infinite; /* Opera 12+ */
    animation:         DEFILE 60s linear infinite; /* IE 10+, Fx 29+ */
  }
  
  #bandeauDefilant b, #bandeauDefilant p{
    display: inline; text-align: left; font-size: 12px; text-transform: uppercase;
  }

  @-webkit-keyframes DEFILE {
    0%   {transform: translate(-33%);}
    100%   {transform: translate(-66%);}
  }
  @-moz-keyframes DEFILE {
    0%   {transform: translate(-33%);}
    100%   {transform: translate(-66%);}
  }
  @-o-keyframes DEFILE {
    0%   {transform: translate(-33%);}
    100%   {transform: translate(-66%);}
  }
  @keyframes DEFILE {
    0%   {transform: translate(-33%);}
    100%   {transform: translate(-66%);}
  }

#detail{
    background-color: white;
    width: calc(90vw - 30px);
    padding: 50px 15px;
    margin: 0 auto;
    border-radius: 5px;
}