.roboto-slab-fontnew {
    font-family: "Roboto Slab", serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
  }
  
  *{
      padding: 0%;
      margin: 0%;
      background-color: rgb(180, 180, 156);
  }
  
  .top-nav{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px;
      background-color: white;
      box-shadow: rgba(122, 122, 131, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  }
  
  h1{
      background-color: white;
      font-size: xx-large;
      margin-left: 10px;
      font-family: 'Courier New', Courier, monospace;
  }
  
  .lala{
      background-color: white;
  }
  
  .lale{
      background-color: rgb(37, 8, 43);
  }
  
  .links{
      display: flex;
      background-color: white;
  }
  
  .tab{
      padding-right: 40px;
      background-color: white;
  }
  
  .tab a{
      text-decoration: none;
      color: black;
  }
  
  .nav-box{
      display: none;
  }
  
  #bars{
      background-color: white;
  }
  
  .side-nav{
      width : 30%;
      height : 40%;
      background-color : rgb(37, 8, 43);
      color: white;
      position: fixed;
      top: 0%;
      left: -40%;
      padding: 20px;
      transition: 1.5s;
  }
  
  .x-mark{
      text-align: right;
      background-color: rgb(37, 8, 43);
  }
  
  #x-icon{
      background-color: rgb(37, 8, 43);
  }
  
  .side-link{
      padding-top: 20px;
      background-color: rgb(37, 8, 43);
  }
  
  .tabs{
      margin-bottom: 30px;
      font-size: x-large;
      background-color: rgb(37, 8, 43);
  }
  
  .tabs a{
      text-decoration: none;
      color: white;
  }
   
  .one{
      font-size: 20px;
      padding: 15px ;
  }

  #coll{
    padding: 20px;
    border: solid 5px black;
    background-color: darkkhaki;
    margin-left: 30px;
    margin-right: 30px;
    border-radius: 10px;
 }

 .lay1{
     display: flex;
 }

 .box1{
    width: 900px;
    height: 550px;    
    background-color: black;
    margin-left: 3%;
    margin-top: 10%;
    border-radius: 50px;
}

.boxi{
    display: none;
}

.boxe{
    display: none;
}

.shelf1{
    width: 360px;
    height: 720px;
    background-color: rgb(114, 69, 37);
    border-radius: 25px;
    margin-left: 2%;
    margin-top: 4%;
    display: flex;
}

.art1{
    position: relative;
    left: 30px;
    top: 40px;
}

.art2{
    position: relative;
    left: -270px;
    top: 90px;
}

.art3{
    position: relative;
    left: -570px;
    top: 140px;
}

.art4{
    position: relative;
    left: -870px;
    top: 190px;
}

.art5{
    position: relative;
    left: -1170px;
    top: 240px;
}

.art6{
    position: relative;
    left: -1470px;
    top: 290px;
}

.art7{
    position: relative;
    left: -1770px;
    top: 340px;
}

.art8{
    position: relative;
    left: -2070px;
    top: 390px;
}

.s-b-1{
    position: relative;
    left: -2370px;
    top: 440px;
    opacity: 0.8;
}

.shelfbox1{
    width: 360px;
    height: 300px;
    position: relative;
    top: 10px;
    background-color: rgba(143, 87, 48, 0.911);
    z-index: 2;
    border-radius: 25px;
}

.art1:hover{
    position: relative;
    top: 205px;
    left: -175%;
    z-index: 2;
    transform: scale(1.7);
}

.art2:hover{
    position: relative;
    top: 205px;
    left: -255%;
    z-index: 2;
    transform: scale(1.7);
}

.art3:hover{
    position: relative;
    top: 205px;
    left: -335%;
    z-index: 2;
    transform: scale(1.7);
}

.art4:hover{
    position: relative;
    top: 205px;
    left: -420%;
    z-index: 2;
    transform: scale(1.7);
}

.art5:hover{
    position: relative;
    top: 205px;
    left: -515%;
    z-index: 2;
    transform: scale(1.7);
}

.art6:hover{
    position: relative;
    top: 205px;
    left: -580%;
    z-index: 2;
    transform: scale(1.7);
}

.art7:hover{
    position: relative;
    top: 205px;
    left: -670%;
    z-index: 2;
    transform: scale(1.7);
}

.art8:hover{
    position: relative;
    top: 205px;
    left: -760%;
    z-index: 2;
    transform: scale(1.7);
}

.lay2{
    display: flex;
}

.box2{
   width: 900px;
   height: 550px;    
   background-color: black;
    position: relative;
   border-radius: 50px;
   left: 32.5%;
   top: 150px;
}

.s-b-2{
    position: relative;
    left: -2365px;
    top: 440px;
    opacity: 0.8;
}

.shelf2{
   width: 360px;
   height: 720px;
   background-color: rgb(114, 69, 37);
   border-radius: 25px;
   margin-left: 2%;
   margin-top: 4%;
   display: flex;
   position: relative;
   left: -65%;
}

.art9{
    position: relative;
    left: 30px;
    top: 40px;
}

.art10{
    position: relative;
    left: -270px;
    top: 90px;
}

.art11{
    position: relative;
    left: -570px;
    top: 140px;
}

.art12{
    position: relative;
    left: -870px;
    top: 190px;
}

.art13{
    position: relative;
    left: -1170px;
    top: 240px;
}

.art14{
    position: relative;
    left: -1470px;
    top: 290px;
}

.art15{
    position: relative;
    left: -1768px;
    top: 340px;
}

.art16{
    position: relative;
    left:-2065px;
    top:390px;
}

.shelfbox2{
    width: 360px;
    height: 300px;
    position: relative;
    top: 10px;
    background-color: rgba(143, 87, 48, 0.911);
    z-index: 2;
    border-radius: 25px;
}

.art9:hover{
    position: relative;
    top: 220px;
    left: 194%;
    z-index: 2;
    transform: scale(1.7);
}

.art10:hover{
    position: relative;
    top: 220px;
    left: 112%;
    z-index: 2;
    transform: scale(1.7);
}

.art11:hover{
    position: relative;
    top: 220px;
    left: 27%;
    z-index: 2;
    transform: scale(1.7);
}

.art12:hover{
    position: relative;
    top: 220px;
    left: -56%;
    z-index: 2;
    transform: scale(1.7);
}

.art13:hover{
    position: relative;
    top: 220px;
    left: -138%;
    z-index: 2;
    transform: scale(1.7);
}

.art14:hover{
    position: relative;
    top: 220px;
    left: -223%;
    z-index: 2;
    transform: scale(1.7);
}

.art15:hover{
    position: relative;
    top: 220px;
    left: -302%;
    z-index: 2;
    transform: scale(1.7);
}

.art16:hover{
    position: relative;
    top: 220px;
    left: -386%;
    z-index: 2;
    transform: scale(1.7);
}

.sugg{
    display: flex;
    justify-content: space-around;
    padding-bottom: 50px;
    background-color: grey;
    padding-top: 30px;
}

.comm{
    width: 110px;
    background-color: grey;
    font-size: 20px;
}

.cmnt{
    width: 75%;
    font-size: 20px;
}

.submit{
    padding: 20px;
    border-radius: 15px;
    background-color: royalblue;
}

#contact{
    background-color: black;
    color: white;
    padding-top: 10px;
    padding-bottom: 40px;
    font-size: 30px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.par11{
    position: relative;
    top: 200px;
    height: 0px;
    color: white;
    left: -900%;
    background-color: black;
    font-size: 30px;
}

.par21{
    position: relative;
    top: 250px;
    height: 0px;
    color: white;
    left: -525%;
    background-color: black;
    font-size: 30px;
}

.par12{
    display: none;
}

.par22{
    display: none;
}

.pari,.parh{
    display: none;
}

.slideshow{
    position: relative;
    overflow: hidden;
    width: 85%;
    height: 330px;
    background: linear-gradient(to bottom,rgb(57, 136, 156) 0%, rgb(8, 41, 51) 100%);
    padding: 50px;
    display: flex;
    left: 4%;
    margin-bottom: 50px;
    border-radius: 15px;
}

.art17{
    position: absolute;
    animation: slide 13s linear infinite;
}

.art18{
    position: absolute;
    left: 350px;
    animation: slide 13s linear infinite;
}

.art19{
    position: absolute;
    left: 650px;
    animation: slide 13s linear infinite;
}

.art20{
    position: absolute;
    left: 950px;
    animation: slide 13s linear infinite;
}

.art21{
    position: absolute;
    left: 1250px;
    animation: slide 13s linear infinite;
}

.art22{
    position: absolute;
    left: 1550px;
    animation: slide 13s linear infinite;
}

.art23{
    position: absolute;
    left: 1850px;
    animation: slide 13s linear infinite;
}

.art24{
    position: absolute;
    left: 2150px;
    animation: slide 13s linear infinite;
}

.art25{
    position: absolute;
    left: 2450px;
    animation: slide 13s linear infinite;
}

.art26{
    position: absolute;
    left: 2750px;
    animation: slide 13s linear infinite;
}

.art27{
    position: absolute;
    left: 3050px;
    animation: slide 13s linear infinite;
}

.art28{
    position: absolute;
    left: 3350px;
    animation: slide 13s linear infinite;
}

.art29{
    position: absolute;
    left: 3650px;
    animation: slide 13s linear infinite;
}

.art30{
    position: absolute;
    left: 3950px;
    animation: slide 13s linear infinite;
}

.art31{
    position: absolute;
    left: 4250px;
    animation: slide 13s linear infinite;
}

.art32{
    position: absolute;
    left: 4550px;
    animation: slide 13s linear infinite;
}

.naa{
    display: none;
}

@keyframes slide{
    0%{
        transform: translateX(30%);
    }
    100%{
        transform: translateX(-700%);
    }
}

@media screen and (max-width:600px) {
      
    .nav-box{
        display: block;
    }

    .links{
        display: none;
    }

    .lay1{
        height: 620px;
    }

    .shelf1{
      width: 85%;
      left: 6%;
      height: 320px;
      position: relative;
    }
    
    .shelf2 {
      width: 85%;
      height: 320px;
      position: relative;
      left: 6%;
    }

    .box1{
        position: absolute;
        top: 115%;
        width: 85%;
        left:5%;
        height: 250px;
        border-radius: 20px;
    }
  
    #arts{
        width: 100px;
        height: 100px;
    }

    .art1{
        position: relative;
        left: 7%;
        top:12%;
    }
    
    .art2{
        position: relative;
        left: -5%;
        top: 12%;
    }
    
    .art3{
        position: relative;
        left: -14%;
        top: 12%;
    }
    
    .art4{
        position: relative;
        left: -22%;
        top: 12%;
    }
    
.art5{
    position: relative;
    left: -110%;
    top: 60%;
}

.art6{
    position: relative;
    left:-120%;
    top: 60%;
}

.art7{
    position: relative;
    left: -125%;
    top: 60%;
}

.art8{
    position: relative;
    left: -140%;
    top: 60%;
}

.s-b-1{
    display: none;
}

.boxe{
    position: absolute;
    display: block;
    left: 8%;
    top: 85%;
    opacity: 0.8;
    width: 85%;
    height: 80px;
    background-color: rgb(114, 69, 37);
    border-radius: 25px;
    z-index: 3;
}

.boxi{
    position: absolute;
    display: block;
    left: 8%;
    top: 105%;
    opacity: 0.8;
    width: 85%;
    height: 80px;
    background-color: rgb(114, 69, 37);
    border-radius: 25px;
    z-index: 3;
}

.art1:hover{
    position: relative;
    top: 131%;
    left: 36%;
    z-index: 2;
    transform: scale(2.2);
}

.art2:hover{
    position: relative;
    top: 131%;
    left: 5%;
    z-index: 2;
    transform: scale(2.2);
}

.art3:hover{
    position: relative;
    top: 131%;
    left: -26%;
    z-index: 2;
    transform: scale(2.2);
}

.art4:hover{
    position: relative;
    top: 131%;
    left: -53%;
    z-index: 2;
    transform: scale(2.2);
}

.art5:hover{
    position: relative;
    top: 131%;
    left: -81%;
    z-index: 2;
    transform: scale(2.2);
}

.art6:hover{
    position: relative;
    top: 131%;
    left: -109%;
    z-index: 2;
    transform: scale(2.2);
}

.art7:hover{
    position: relative;
    top: 131%;
    left: -136%;
    z-index: 2;
    transform: scale(2.2);
}

.art8:hover{
    position: relative;
    top: 131%;
    left: -167%;
    z-index: 2;
    transform: scale(2.2);
}

.lay2{
    height: 620px;
}


.box2{
    position: absolute;
    top:204%;
    width:85%;
    height: 250px;
    left: 30px;
    border-radius: 20px;
}

#arts{
    width: 100px;
    height: 100px;
}

.art9{
    position: relative;
    left: 7%;
    top:12%;
}

.art10{
    position: relative;
    left: -5%;
    top: 12%;
}

.art11{
    position: relative;
    left: -14%;
    top: 12%;
}

.art12{
    position: relative;
    left: -29%;
    top: 12%;
}

.art13{
position: relative;
left: -115%;
top: 60%;
}

.art14{
position: relative;
left:-120%;
top: 60%;
}

.art15{
position: relative;
left: -125%;
top: 60%;
}

.art16{
position: relative;
left: -135%;
top: 60%;
}

.s-b-2{
display: none;
}

.boxf{
position: absolute;
display: block;
left: 8%;
top: 168%;
opacity: 0.8;
width: 85%;
height: 80px;
background-color: rgb(114, 69, 37);
border-radius: 25px;
z-index: 3;
}

.boxr{
position: absolute;
display: block;
left: 8%;
top: 188%;
opacity: 0.8;
width: 85%;
height: 80px;
background-color: rgb(114, 69, 37);
border-radius: 25px;
z-index: 3;
}

.art9:hover{
position: relative;
top: 133.5%;
left: 35%;
z-index: 2;
transform: scale(2.2);
}

.art10:hover{
position: relative;
top: 133.5%;
left: 5%;
z-index: 2;
transform: scale(2.2);
}

.art11:hover{
position: relative;
top: 133.5%;
left: -26%;
z-index: 2;
transform: scale(2.2);
}

.art12:hover{
position: relative;
top: 133.5%;
left: -57%;
z-index: 2;
transform: scale(2.2);
}

.art13:hover{
position: relative;
top: 133.5%;
left: -84%;
z-index: 2;
transform: scale(2.2);
}

.art14:hover{
position: relative;
top: 133.5%;
left: -110%;
z-index: 2;
transform: scale(2.2);
}

.art15:hover{
position: relative;
top: 133.5%;
left: -138%;
z-index: 2;
transform: scale(2.2);
}

.art16:hover{
position: relative;
top: 133.5%;
left: -165%;
z-index: 2;
transform: scale(2.2);
}

.cmnt{
  width: 40%;
}
.cmnt:focus{
  outline:none;
}

.slideshow{
  width: 65%;
  left: 5%;
}

}

.par12{
    display: block;
    position: relative;
    left: -220%;
    color: white;
    background-color: black;
    height:0%;
    top: 125%;
}

.par22{
    display: block;
    position: relative;
    left: -215%;
    color: white;
    background: black;
    height: 0%;
    top: 130%;
}

.mee{
  background: black;
}

#contact{
  font-size: 25px;
}