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

*{
    margin:0;
    padding:0;
}

::selection {
    background: #fff;
    color: #024fa1;
}

body{
    background: #f3f9ff;
    font-family: 'Work Sans', sans-serif;
}
.detail{
    position: relative;
    top: 220px;
    text-align: center;
    padding:50px;
    margin-bottom: 250px;
    background-color:#fff;
}

#logo{
    position: absolute;
    background-image:url(../img/logo.svg);
    width:600px;
    height:160px;
    left: 50%;
    margin-left: -300px;
    background-size: 95%;
    background-position: center center;
    background-repeat: no-repeat;
}

#products{
    max-width:900px;
    margin:0 auto;
}

.product{
    transition:0.4s;
    width: 50%;
    max-width: 430px;
    display: inline-block;
    text-align: center;
    margin: 0;
    padding-bottom: 30px;
    border-radius: 10px;
}
.product:hover{
    transition: 0.1s;
    background-color: rgba(255,255,255,1);
}

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

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

.textProduct{
    margin:0 35px;
}

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

.price{
    font-weight:normal;
    font-size:20px;
    margin: 10px auto 0 auto;
}

.description{
    margin-top: 10px;
    font-size: 12px;
}

.field{
    background-color: #fff;
    color: #121212;
    text-align: left;
    text-transform: uppercase;
    font-size: 12px;
    font-weight:normal;
    padding: 15px;
    margin: 20px auto 0 auto;
    border-radius: 3px;
    max-width: 200px;
}
.bouton{
    background-color: #024fa1;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    padding: 15px;
    margin: 20px auto 0 auto;
    border-radius: 3px;
    max-width: 200px;
}

.bouton:hover{
    background-color: #0868bf;   
}
#highlight{
    width: 100%;
}
#highlight .textProduct{
    position: absolute;
    width: 200px;
    left: 55%;
    margin-top: 300px;
    text-align: center;
}

#vinyls{
    position: absolute;
    top: 900px;
    left: 50%;
    max-width: 750px; 
    margin-left: -375px;
    text-align: center;
}

#remedypack{
   background-image:url(../img/remedypack.png);
    background-size:contain;
    position: absolute;
    margin-top: 120px;
    max-width: 600px;
    width: 100%;
    background-repeat: no-repeat;
    height: 675px;
}

#remedyvinyl .picProduct{
    background-image:url(../img/remedyvinyl.jpg);
}
#remedytshirt .picProduct{
    background-image:url(../img/remedytshirt.png);
}
#babyimyourstshirt .picProduct{
    background-image:url(../img/babyimyourstshirt.png);
    background-size: 65%;
}
#stillwaters .picProduct{
    background-image:url(../img/still-waters.jpg);
}
#byyourside .picProduct{
    background-image:url(../img/by-your-side.jpg);
}
#anotheryou .picProduct{
    background-image:url(../img/another-you.jpg);
}
#babyimyours .picProduct{
    background-image:url(../img/baby-im-yours.jpg);
}


#oneoutoftwo .picProduct{
    background-image:url(../img/1outof2.jpg);
}

#getlostremixes .picProduct{
    background-image:url(../img/getlostremixes.jpg);
}

#toogoodforme .picProduct{
    background-image:url(../img/2good4memytoyremixes.jpg);
}

#oneoutoftwo .picProduct{
    background-image:url(../img/1outof2.jpg);
}


#beminetonight .picProduct{
    background-image:url(../img/beminetonight.jpg);
}


.picProduct{
    transition: 0.5s;
    background-size:300px;
}
    .product:hover .picProduct{
        transition: 0.1s;
        transform: rotate(-3deg);
    }
    .big .picProduct:hover{
        transition: 0.4s;
        transform: rotate(0deg);
    }

#footer{
    text-align: center;
    margin: 50px auto;
}

#footer p, .copyright, #footer h1{
    font-size: 10px;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 5px auto;
}

#logos{
    text-align: center;
    width: 300px;
    margin: 0 auto;
}

.logo{
    transition: 0.5s;
    display: inline-block;
    background-size: cover;
    width:90px;
    height:60px;
    margin:25px;
    opacity: 0.3;
}

.logo:hover{
    transition: 0.1s;
    display: inline-block;
    background-size: cover;
    width:90px;
    height:60px;
    margin:25px;
    opacity:1;
}


#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);
}

#subscribe{
    z-index: 20;
    text-align: left;
    padding-bottom: 20px;
    margin-bottom: 5px;
    width: 100%;

}

    #social a, #listen a{
        transition: 0.5s;
        width: 40px;
        height: 40px;
        transition: 0.2s;
        display: inline-block;
        text-decoration: none;
        border-radius: 30px;
        padding: 0 0 10px 0;
        opacity: 0.3;
    }

    #social a:hover, #listen a:hover{
        transition: 0.1s;
        opacity: 1;
    }

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

#newsletter form{
	background-color: transparent;
    border: 2px solid rgba(0,0,0,0.3);
	display: inline-block;
	width: 300px;
	margin: 0 auto 20px auto;
	border-radius: 50px;
}
#newsletter form:hover{
	background-color: white;
    border: 2px solid rgba(255,255,255,1);
}
#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;
}

#because{
    background-image:url(../img/because.svg);
}

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





@media screen and (max-width: 700px) { 
    .product{
        width: 96%;
    }
    #highlight .textProduct{
        left: 50%;
        width: 280px;
        text-align: center;
        margin-left: -140px;
        margin-top: 750px;
    }
    #products {
        padding: 0;
        margin: 0;
        width: 100%;
    }
    #vinyls {
        padding: 0;
        top: 1200px;
        left: 0;
        width: 100%;
        margin-left:0;
        text-align: center;
    }
    #logo{
        width:500px;
        margin-left: -250px;
    }
}