body{
        font-size: 0px;
        padding: 0px;
        margin: 0px;
        font-family: 'appleM', sans-serif;
    }
    p{
        margin: 0px;
    }

    #productBanner{
        margin-top: 80px;
        width: 100%;
    }

    #grey{
        background-color: #7c858c;
        width: 100%;
    }
    #greyFlex{
        display: flex;
        justify-content: center;
        align-items: center;
    
    }
    #greyFlex p{
        width: 25vw;
        /* height: 9vh; */
        padding: 3vh 0;
        font-size: 3.5vw;
        text-align: center;
        font-weight: 600;
        color: #ffffff;
        /* display: flex;
        align-items: center;
        justify-content: center; */
        opacity: 0.5;
    }

    #main{
        background-color: #fafafa;
    }
    .tap{
    
        margin: 0 auto;
        /* padding: 100px 0; */
        /* display: flex;
        justify-content: center; */
    }
    .rect{
        width: 98vw;
        /* height: 50vw; */
        background-color: rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(10px) brightness(120%);
        border-radius: 20px;
        box-shadow: 5px 5px 14px rgba(184, 184, 184, 0.7),
                    -5px -5px 14px rgba(255, 255, 255, 0.8);
  
        /* background: #ffffff;
        box-shadow:  5px 5px 14px #b8b8b8,
                     -5px -5px 14px #ffffff; */
        margin: 1vw;                
        position: relative;
        cursor: pointer;
    }
   
    .imgWrap{
        width: 98vw;
        /* height: 50vw; */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .rectImg{
        width: 98vw;
    }

    .nameTxt{
        /* width: 290px;
        height: 90px; */
        text-align: center;
        font-size: 4vw;
        font-weight: 600;
        display: flex;
        justify-content: center;
        align-items: center;

        position: absolute;
        top: 80%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .rect:hover{
        background-color: #0032a0;

        color: white;
    }
    .rectSw:hover{
        background-color: #0032a0;

        color: white;
    }

    .nameTxtAcc{
        text-align: center;
        font-size: 4vw;
        font-weight: 600;
        display: flex;
        justify-content: center;
        align-items: center;

        position: absolute;
        top: 90%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #pianoBenchImg{
        width: 80vw;
    }
    #sum3Img{
        width: 85vw;
    }


   
    .rectSw{
        width: 98vw;
        padding-bottom: 15vh;
        /* height: 390px; */
        margin: 1vw;                
        position: relative;
        background-color: rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(10px) brightness(120%);
        border-radius: 20px;
        box-shadow: 5px 5px 14px rgba(184, 184, 184, 0.7),
                    -5px -5px 14px rgba(255, 255, 255, 0.8);
    }
    .imgWrapSw{
        width: 98vw;
        /* height: 390px; */
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }
    .rectImgSw{
        width: 98vw;
        /* height: 270px; */
    }

    .nameTxtSw{
        width: 98vw;
        /* height: 90px; */
        text-align: center;
        font-size: 3.5vw;
        font-weight: 500;
        display: flex;
        justify-content: center;
        align-items: center;

        position: absolute;
        top: 85%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

  

    /* //////////////////////////////////////////////////// */
  
    #supportGrey{
        display: flex;
        justify-content: center;
        width: 100%;
        background-color: #4e5459;
    }
    
    #supportGrey p{
        width: 30vw;
        /* height: 10vh; */
        padding: 2vh 0;
        font-size: 3vw;
        font-weight: 600;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0.5;
        cursor: pointer;
    }
    a{
        text-decoration: none;
        color: #000000;
    }
    #manual{
        margin: 7vh auto 10vh;
        background-color: #ffffff;
    }
    #manual>div{
        display: flex;
        justify-content: center;
    }
    #manual>div>a{
        
        font-size: 3vw;
        font-weight: 600;
        width: 40vw;
        height: 15vw;
        margin: 1vw;
        background: linear-gradient(to bottom, #fdfdfd, #f1f1f1);
        border: 1px solid #e4e4e4;
        box-shadow: 0px 10px 15px -5px rgba(0, 0, 0, 0.3);
        border-radius: 30px;
        /* background-color: #f5f5f5;
        border: 1px solid #d9d9d9;
        border-radius: 5px;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); */

        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    #manualEmpty{
    
        width: 40vw;
        height: 15vw;
        margin: 1vw;
    }
    .manualTxt{
        font-size: 2.2vw;
        font-weight: 400;
    }
    #manual1,#manual2,#manual3,#manual4{
        cursor: pointer;
    }
    #install{
        display: none;
        align-self: center;
        align-content: center;
        align-items: center;
        text-align: center;
        justify-content: center;
    }
    #install span{
        font-family: 'appleB', sans-serif;
        font-size: 3vw;
    }
    #install iframe{
        align-self: center;
        align-content: center;
        align-items: center;
        text-align: center;
        display: block;
        margin-top : 3vh;
        margin-bottom: 10vh;
        margin-left: 50%;
        transform: translate(-50%,0%); 
        width: 80vw;
        height: 45vw;
    }
    

#midibluAir,#meister,#firmware{
    cursor: pointer;
    /* transition: all 0.3s linear; */
}
  /* #firmware:hover,
  #meister:hover,
  #midibluAir:hover {
    transform: scale(1.1);
    z-index: 999;
  } */