/*Header*/
body{
    margin: 0 auto;
}
header{
    position: fixed;
    top:0px;
    left:0px;
    z-index: 3;
}
.logo_header{
    position:absolute;
    top:5px;
    left:20px;
    z-index: 3;
}
.logo_header_mobile{
    display: none;
    height: 46px;
    position:absolute;
    top:7px;
    left: 200px;
    z-index: 4;
}
.Hatching{
    position:absolute;
    left:0px;
    top:0px;
    padding: 0px 3200px 70px 0px;
    background: rgba(0, 0, 0, 0.8);
    z-index: 2;
}
a{
    text-decoration: none;
}

.menu{
    list-style:none;
    display:flex;
    font-family: "Impact", Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: 28px;
    color: white;
    position:absolute;
    top: 20px;
    left: 450px;
    z-index: 3;
}
.mobile-menu{
    display: none;
}
.menu-list{
    display: none;
}


/*PRODUCT*/
.product{
    height: 52px;
}
.product a{
    color: white;
}
.product:hover .product-menu-list{
    color: orange;
    transform: scaleY(1);
}
.product-menu-list:hover{
    display: block;
}
.product-menu-list{
    list-style:none;
    position: absolute;
    top: 30px;
    left:-40px;
    height: 165px;
    width: 350px;
    padding-left: 20px;
    padding-right: 20px;
    background: rgba(0, 0, 0, 0.6);
    font-family: impact,"Arial Narrow Bold", sans-serif;
    font-size: 20px;
    color:white;
    
    transform: scaleY(0);
    transform-origin: center top;
    transition: all 0.1s;
}
.guitar-effector:hover{
    background-color: #505050;
}
.bass-effector:hover{
    background-color: #505050;
}
.player-interface:hover{
    background-color: #505050;
}
/*PRODUCT_end*/

/*SHOP*/
.shop{
    position: absolute;
    left: 150px;
    height: 52px;
}
.shop a{
    color: white;
}
.shop:hover .shop-menu-list{
    color:orange;
    transform: scaleY(1);
}
.shop-menu-list:hover{
    display: block;
}
.shop-menu-list{
    list-style:none;
    position: absolute;
    top: 30px;
    left:-40px;
    height: 65px;
    width: 140px;
    padding-left: 20px;
    padding-right: 20px;
    background: rgba(0, 0, 0, 0.6);
    font-family: Century,"Arial Narrow Bold", sans-serif;
    font-size: 20px;
    color:white;
    font-weight: bold;
    transform: scaleY(0);
    transform-origin: center top;
    transition: all 0.1s;
}
.amazon:hover{
    background-color: #505050;
}
/*SHOP_end*/

/*SUPPORT*/
.support{
    position: absolute;
    left: 260px;
    height: 52px;
}
.support a{
    color: white;
}
.support:hover .support-menu-list{
    color:orange;
    transform: scaleY(1);
}
.support-menu-list:hover{
    display: block;
}
.support-menu-list{
    list-style:none;
    position: absolute;
    top: 30px;
    left:-40px;
    height: 65px;
    width: 140px;
    padding-left: 20px;
    padding-right: 20px;
    background: rgba(0, 0, 0, 0.6);
    font-family: impact,"Arial Narrow Bold", sans-serif;
    font-size: 20px;
    color:white;
    font-weight: bold;
    transform: scaleY(0);
    transform-origin: center top;
    transition: all 0.1s;
}
/*support_end*/

.repeir{
    font-family: "Yu Mincho","Book Antiqua","century","Georgia",cursive;
}
.repeir:hover{
    background-color: #505050;
}
.contact{
    font-family: "Yu Mincho","Book Antiqua","century","Georgia",cursive;
}
.contact:hover{
    background-color: #505050;
}
.InstagramLogo{
    width: 190px;
    position: absolute;
    top: -2px;
    left: 400px;
}
.YouTube{
    width: 155px;
    position: absolute;
    top: 0px;
    left: 630px;
}

/*Header_end*/


/*mobile_header*/
@media screen and (max-width: 480px) {
    a{
        color: black;
    }
    .logo_header{
        display: none;
        width:280px;
        margin-left: -10px;
        margin-right: 5px;
        margin-top: 0px;
    }
    .logo_header_mobile{
        display: block;
    }
    input[type="checkbox"]{
        position:absolute;
        left:-300px;
    }
    .mobile-menu{
        list-style:none;
        display: block;
        position: absolute;
        top:7px;
        left: 10px;
        width:50px;
        height:40px;
        border: 2px solid;
        border-radius: 4px;
        border-color: rgb(163, 163, 163);
        z-index: 4;
        font-size: 16px;
        color: rgb(163, 163, 163);
        font-family: impact,"Arial Narrow Bold", sans-serif;
        text-align: center;
    }
    .menu-list{
        display: block;
        list-style:none;
        position: absolute;
        left: -300vw;
        margin-top: 10px;
        width: 200px;
        background: rgba(100, 100, 100, 0.85);
        font-family: impact,"Arial Narrow Bold", sans-serif;
        font-size: 28px;
        color: black;
        text-align: center;
        transition: all 0.25s;
    }
    input[type="checkbox"]:checked ~ .menu-list{
        position: absolute;
        left:-20px;
        padding-left: 0px;
    }
    .display_close{
        display: none;
    }
    .display_open{
        display: block;
    }
    input[type="checkbox"]:checked ~ .display_close{
        display: block;
    }
    input[type="checkbox"]:checked ~ .display_open{
        display: none;
    }
    .mobile-product{
        padding-top: 10px;
        padding-bottom: 10px;
        border-bottom: 0.5px solid;
        border-color:rgb(34, 34, 34);
    }
    .mobile-shop{
        padding-top: 10px;
        padding-bottom: 10px;
        border-bottom: 0.5px solid;
        border-color:rgb(34, 34, 34);
    }
    .mobile-support{
        padding-top: 10px;
        padding-bottom: 10px;
        border-bottom: 0.5px solid;
    }
    .mobile-instagram{
        border-bottom: 0.5px solid;
        padding-top: 10px;
        padding-bottom: 5px;
    }
    .mobile_InstagramLogo{
        width: 120px;
    }
    .mobile-YouTube{
        padding-top: 10px;
        padding-bottom: 5px;
    }
    .mobile_YouTubeLogo{
        width: 100px;
        padding-top: 5px;
    }
    .Hatching{
        width: 100%;
        padding-bottom: 57px;
        background: rgba(0, 0, 0, 0.7);
    }
    
    /*mobile_header_end*/

    
 
 }