.social{
  list-style-type: none;
  display: inline;
}

html {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}



.wrapper{
  list-style: none;
  width: 100%;
  height: 100%;
  margin: 0px;


  display: grid;
  grid-template-rows: repeat(15, 100px) ;
  grid-template-columns: repeat(12, 100px) ;
  grid-gap: 5px

}

.wrapper li:nth-child(1){
  grid-row: 1 / span 1;
  grid-column:2/span 1;
  max-width: 100px;
  z-index: 10;

}

.wrapper li:nth-child(2){
  grid-row: 2 / span 1;
  grid-column: 6 /span 1;
  object-fit: scale-down;
  z-index: 2;

}
.wrapper li:nth-child(3){
  grid-row: 2 / span 1;
  grid-column: 1 /span 1;
  object-fit: scale-down;
  z-index: 4;

}
.wrapper li:nth-child(4){
  grid-row: 8 / span 1;
  grid-column: 1 /span 1;
  object-fit: scale-down;
  z-index: 2;

}
.wrapper li:nth-child(5){
  grid-row: 2 / span 1;
  grid-column: 3 /span 1;
  object-fit: scale-down;
  z-index: 7;

}
.wrapper li:nth-child(6){
  grid-row: 5 / span 1;
  grid-column: 3 /span 1;
  object-fit: scale-down;
  z-index: 5;

}
.wrapper li:nth-child(7){
  grid-row: 2 / span 1;
  grid-column: 5 /span 1;
  object-fit: scale-down;
  z-index: 6;

}
.wrapper li:nth-child(8){
  grid-row: 5 / span 1;
  grid-column: 5 /span 1;
  object-fit: scale-down;
  z-index: 5;

}
.wrapper li:nth-child(9){
  grid-row: 1 / span 1;
  grid-column: 1/span 1;
  object-fit:  contain;
  z-index: 11;
}
.wrapper li:nth-child(10){
  grid-row: 1 / span 1;
  grid-column: 10/span 1;
  object-fit:  contain;
  z-index: 1;
}
.wrapper li:nth-child(11){
  grid-row: 5 / span 1;
  grid-column: 7/span 1;
  object-fit:  contain;
  z-index: 1;
}
.wrapper li:nth-child(12){
  grid-row: 2 / span 1;
  grid-column: 7/span 1;
  object-fit:  contain;
  z-index: 1;
}
.wrapper li:nth-child(13){
  grid-row: 1 / span 1;
  grid-column: 6/span 4;
  object-fit:  contain;
  z-index: 1;
}
.wrapper li:nth-child(14){
  grid-row: 5 / span 1;
  grid-column: 1/span 1;
  object-fit:  contain;
  z-index: 1;
}
.wrapper li:nth-child(15){
  grid-row: 8 / span 1;
  grid-column: 3/span 4;
  object-fit:  contain;
  z-index: 2;
}
.wrapper li:nth-child(16){
  grid-row: 1 / span 1;
  grid-column: 3/span 4;
  object-fit:  contain;
  z-index: 1;
}
.wrapper li:nth-child(17){
  grid-row: 5 / span 7;
  grid-column: 10/span 4;
  object-fit:  contain;
  z-index: 1;
}
.wrapper li:nth-child(18){
  grid-row: 8 / span 1;
  grid-column: 7/span 1;
  object-fit:  contain;
  z-index: 10;
}
.wrapper li:nth-child(19){
  grid-row: 11 / span 1;
  grid-column: 1/span 1;
  object-fit:  contain;
  z-index: 10;
}
.wrapper li:nth-child(20){
  grid-row: 11 / span 1;
  grid-column: 3/span 1;
  object-fit:  contain;
  z-index: 10;
}
.wrapper li:nth-child(21){
  grid-row: 3 / span 1;
  grid-column: 13/span 1;
  object-fit:  contain;
  z-index: 10;
}
.wrapper li:nth-child(22){
  grid-row: 1 / span 1;
  grid-column: 4/span 1;
  object-fit:  contain;
  z-index: 1;
}
.wrapper li:nth-child(23){
  grid-row: 11 / span 1;
  grid-column: 5/span 1;
  object-fit:  contain;
  z-index: 1;
}



.salebanner{
  width: 300px;
  object-fit: scale-down;

}
.salebanner2{
  width: 300px;
  object-fit: scale-down;

}
.dialpic{
  width: 285px;
  object-fit: scale-down;

}
.buydial{
  width: 50px;
  object-fit: scale-down;

}
.buypup{
  width: 240px;
  object-fit: scale-down;


}
.ringpcode{
  width: 300px;
  object-fit: scale-down;

}
.pcode2{
  width: 250px;
  object-fit: scale-down;

}
.buyenv{
  width: 250px;
  object-fit: scale-down;

}
.buytext{
  width: 325px;
  object-fit: scale-down;

}

.buy911{
  width: 345px;
  object-fit: scale-down;

}
.volsale{
  width: 325px;
  object-fit: scale-down;

}
.ringsale{
  width: 240px;
  object-fit: scale-down;

}
.ringsalee{
  width: 240px;
  object-fit: scale-down;

}
.mapsale{
  width: 242px;
  object-fit: scale-down;

}
.swpsale{
  width: 270px;
  object-fit: scale-down;

}
.minsale{
  width: 250px;
  object-fit: scale-down;
margin-left: 20px
}
.tvsale{
  width: 270px;
  object-fit: scale-down;
margin-left: 20px
}
.lilconsale{
  width: 250px;
  object-fit: scale-down;
margin-left: 45px
}
.starterpack{
  width: 500px;
  object-fit: scale-down;

}
.string{
  width: 400px;
  object-fit: scale-down;

}
.ig{
  width: 50px;
  object-fit: scale-down;


}
.twitter{
  width: 50px;
  object-fit: scale-down;
}
.patreon{
  width: 55px;
  object-fit: scale-down;
}

.yt{
  width: 100px;
  object-fit: scale-down;
}
.shop{
  width: 100px;
  object-fit: scale-down;
}
.ppic{
  width: 100px;
  object-fit: scale-down;
}
.beta{
  width: 204px;
  object-fit: scale-down;
}




.dl{
  width: 240px;
  object-fit: scale-down;
margin-left: 85px
}
.dl1{
  width: 240px;
  object-fit: scale-down;
margin-left: 75px
}
.dl2{
  width: 240px;
  object-fit: scale-down;
margin-left: 112px
}
.dl3{
  width: 240px;
  object-fit: scale-down;
margin-left:150px
}
.dl4{
  width: 240px;
  object-fit: scale-down;
margin-left: 95px
}
.dlmap{
  width: 240px;
  object-fit: scale-down;
margin-left: 65px
}
.dlring{
  width: 240px;
  object-fit: scale-down;
margin-left: 78px
}
.dlpcode{
  width: 240px;
  object-fit: scale-down;
margin-left: 75px
}
.dlpup{
  width: 240px;
  object-fit: scale-down;
margin-left: 56px
}
.dlcon{
  width: 240px;
  object-fit: scale-down;
margin-left: 102px
}
.dlsp{
  width: 240px;
  object-fit: scale-down;
margin-left: 180px
}
.dlmin{
  width: 240px;
  object-fit: scale-down;
margin-left: 77px
}
.dltv{
  width: 240px;
  object-fit: scale-down;
margin-left: 90px
}
.dlcard{
  width: 240px;
  object-fit: scale-down;
margin-left: 103px
}
.interview{
  width: 75px;
}