*{
    font-family: Helvetica;
}

.c{
    cursor: pointer;
}

body{
    margin: -1px;
    box-sizing: border-box;
}

#firstCont{

    width: 100%;
    height: 110px;


}   

div{
    /* border: 1px solid black; */
}

#firstBox{
    margin-top: 70px;;
    width: 100%;
    height: 60px;
}

#secondBox{

    height: 50px;
    box-shadow: 0px 1.5px 0px 0px rgb(216,216,216);
    
}

#namesTag{

    width: 75%;
    margin-left: 12%;
    height: 35px;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto;
    grid-gap: 1%;
    color: rgb(107,102,102);
    font-size: .95vw;
    
    box-sizing: border-box;
    padding-top: 1.5%;
}


#m{
    margin-top: 1%;
}

#rt{
    display: grid;
    grid-template-columns: auto auto;
}

#rot{

    padding: 10px 0px 0px 0 ;
    transform: rotate(90deg);

}


#secondCont{

    width: 100%;
    height: 610px;
    overflow: scroll;
    margin: 0;
margin-top: .2%;

}

body::-webkit-scrollbar {
  display: none;
}

#secondCont::-webkit-scrollbar {
  display: none;
}

#outerBox{

    width: 74%;
    height: 360px;
    margin-left: 12%;
    margin-top: 2%;

    display: grid;
    grid-gap: 7%;
    grid-template-columns: 43% 50%;

}

#imageBox{
    /* padding-top: 5%; */
    /* padding-bottom: 8%; */
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 15% 70% 15%;
    height: 100%;
}

#left{
    margin: 200% 0 0 50%;
    color: rgb(110,110,110);
    transition: all .1s linear;
}

#left:active{
    transform: scale(.9);
}

#right{
    margin: 200% 0 0 30%;
    color: rgb(110,110,110);
    transition: all .1s linear;
}
#right:active{
    transform: scale(.9);
}

#slideShow{
    box-sizing: border-box;
    transform: translateX(0);
}

#slideShow img{
    width: 95%;
    height: 95%;
    /* border: 1px solid green; */
    margin: 0% 0 0 2%;
    
    box-sizing: border-box;
    
     /* transition: transform 0.5s ease-in-out;  */

}

#prodName{

    display: grid;
    width: 100%;
    height: 30px;
    grid-template-columns: 50% 50%;
    font-size: 1.1vw;
    

}
#name{
    box-sizing: border-box;
    padding-top: 1.5%;
}

#addToCart{
    font-size: .8vw;
    text-align: center;
    color: black;
    box-sizing: border-box;
    padding-top: 2.5%;
    border-radius: 5px;
    background-color: rgb(255,225,65);
    width: 35%;
    height: 100%;
    margin: -2% 0 0 65%;


}

#qty{
    font-size: .95vw;
    color: rgb(110,110,110);
    margin-top: 1.5%;
}


#price{

    font-size: .99vw;
    font-weight: 600;
    margin-top: 2%;
    box-sizing: border-box;
    padding-bottom: 8%;

}

.line{
    border-top: .2px solid rgb(238,238,238);
}

#u{
    font-size: .9vw;
    margin-top: 3%;

}

#addqty{

    box-sizing: border-box;
    width: 9%;
    color: rgb(12,131,31);
    border: 1px solid rgb(12,131,31);
    border-radius: 3px;
    height: 40px;
    text-align: center;
    padding-top: 1.7%;
    font-size: .95vw;
    margin-top: 2%;

}

#locationBox{
    display: block;
    width: 100%;
    height: 100px;
    background-color: rgb(247,247,247);
    margin-top: 6%;
    box-sizing: border-box;
    padding: 2% 0 0 2.5% ;
    color: rgb(55,163,203);
    font-size: .95vw;
}

#locationName{

    display: grid;
    grid-template-columns: 95% 5%;

    /* margin: 2%; */

}

#inpBox{

    width: 65%;
    background-color: white;
    height: 40px;
    margin: 2.5% 0 0 .2% ;
    display: grid;
    grid-template-columns: 15% 60% 25%;
    border: 1px solid rgb(238,238,238);
    border-radius: 3px;

}   

#inpBox>div:nth-child(3){
    
    border-left: 1px solid rgb(238,238,238);
}

#inpBox>div>span{

    padding: 17% 0 0 30% ;
    /* text-align: center; */
    box-sizing: border-box;

}

#inp{

    width: 90%;
    height: 80%;
    font-size: .8vw;
    outline: none;
    color: rgb(170,170,170);
    border: none;
    box-sizing: border-box;
    padding: 4% 0 0 0;

}

#detect{

    display: grid;
    grid-template-columns: 30% 60%;
    grid-gap: 7%;
    color: rgb(102,102,102);
    box-sizing: border-box;
    padding-top: 12%;

}

#outerBox2{
     width: 74%;
    /* height: 600px; */
    margin-left: 12%;
    margin-top: 2%;

    display: grid;
    grid-gap: 3%;
    grid-template-columns: 47% 50%;

}
#pd{
    color: rgb(51,51,51);
    font-size: 1.1vw;
    box-sizing: border-box;
    padding-bottom: 2.2%;
}

.h1{
    color: rgb(51, 51, 51);
    font-size: .97vw;
    margin-top: 2.5%;
}
.h2{
    width: 100%;
    text-align: left;
    color: #666;
    font-size: .9vw;
    margin-top: 2%;
    font-weight: 300;
    box-sizing: border-box;
    padding-bottom: 1%;
}

#vm{
    color: rgb(12,131,31);
    text-align: center;
    border-top: 1px solid rgb(238,238,238) ;
    box-sizing: border-box;
    padding-top: 2%;
    font-size: 1vw;
    display: grid;
    grid-gap: .5%;
    grid-template-columns: 50% 40%;
    
}
#vm>div:nth-child(1){
    text-align: right;
    
    padding-top: 1.5%;
}


#vm>div:nth-child(2){
    text-align: left;
    box-sizing: border-box;
}
#viewMore{
    display: none;
}

#vl{
    color: rgb(12,131,31);
    text-align: center;
    border-top: 1px solid rgb(238,238,238) ;
    box-sizing: border-box;
    padding-top: 2%;
    font-size: 1vw;
    display: grid;
    grid-gap: .5%;
    grid-template-columns: 50% 40%;
    display: none;
    
}
#vl>div:nth-child(1){
    text-align: right;
    
    padding-top: 1.5%;
}


#vl>div:nth-child(2){
    text-align: left;
    box-sizing: border-box;
}

#whyT{
    color: rgb(51,51,51);
    font-size: 1.1vw;
    padding-bottom: 4% ;
}

.box{

    display: grid;
    grid-template-columns: 12% 88%;
    /* grid-gap: .5%; */

    /* height: 50px; */
    padding-bottom: 2%;

}
.boxImg{
    width: 85%;
    height: 95%;
}

.textB{
    margin-top: .5%;
    font-size: .8vw;

}

.textC{
    margin-top: .5%;
    font-size: .8vw;
    color: rgb(51, 51, 51);
    
}





div{
    /* border: 1px solid black; */
}