div {
    position: absolute;
}
.closed{
    display:none;
}
.close{
    right: 0.5%;
    top: 1%;
    width: 4%;
    cursor:pointer;
    z-index: 999;
}
.girl{
    display:none;
} 
.logo{
    width: 25%;
    top: 10%;
    left: 40%;
}
.panelsection{
    width: 80%;
    height: 70%;
    right: 3%;
    top: 22%;
}
.panel{
    width: 23%;
    height: 100%;
    margin: 18px;
}
.pannel2{
    right:49%;
}
.pannel3{
    right: 24.5%;;
}
.pannel4{
    right:0;
}

.panellink{
    position: absolute;
    text-align: center;
    width: 50%;
}
.link1{
    width:40%;
    left:26%;
}
.link2{
    width: 65%;
    left: 18%;
}
.link3{
    width: 38%;
    left: 30%;
}
.link4{
    width:38%;
    left: 30%;
}
.frame{
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    background: #fff;
    top: 20px;
    left: 20px;
    opacity: 0;
    pointer-events: none;
  }
  .swiper-close{
    width: 70px;
    padding: 10px;
    top: 0;
    right: 0;
    z-index: 11;
    pointer-events: auto;
  }
  .swiper-close img{
    width: 100%;
  }
  .leftsection{
    width: 50%;
    height: 100%;
    left: 0%;
    top: 0;
  }
  .leftsection img{
      width: 100%;
      height: auto;
  }
  .watchsideimg,
  .jwellerysideimg,
  .dresssideimg,
  .shoessideimg{
     width: 100%;
     height: 100%;
  }
  .watchsideimg{
      background: url(../images/watchsideimg.jpg) no-repeat center center;
      background-size: cover;
  }
  .jwellerysideimg{
      background: url(../images/jwelerysideimg.jpg) no-repeat center center;
      background-size: cover;
  }
  .dresssideimg{
      background: url(../images/dresssideimg.jpg) no-repeat center center;
      background-size: cover;
  }
  .shoessideimg{
      background: url(../images/shoessideimg.jpg) no-repeat center center;
      background-size: cover;
  }
  .innerlogo{
    top: 50%;
    left: 20%;
    width: 60%;
    transform: translateY(-50%);
    display:block;
  }
  .righttsection{
    width: 50%;
    height: 100%;
    left: 50%;
    top: 0;
    pointer-events: auto;
  }
  
  .swipershape{
    width: 100%;
    height: 100%;
  }
  .swiper-container {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    width: 100% !important;
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  .swiper-button-prev{
    background: url(../images/leftarrow.png) no-repeat center center;
    background-size: cover;
    pointer-events: auto!important;
    height:45px !important;
    color: transparent !important; 
    left:30px;
  }
  .swiper-button-next{
    background: url(../images/rightarrow.png) no-repeat center center;
    background-size: cover;
    pointer-events: auto!important;
    height:45px !important;
    color: transparent !important; 
    right:30px;
  }
  .wslide img, .dslide img, .sslide img, .jslide img{
    width: 40%;
    height: auto;
  }
  .wslidecta, .dslidecta, .sslidecta, .jslidecta{
      bottom: 3%;
      width: 40%;
      padding: 10px;
      left: 50%;
      transform: translateX(-50%);
  }
  .wslidecta img, .dslidecta img, .sslidecta img, .jslidecta img{
    width: 100%;
    height: auto;
  }
  /* Tab Land */
  @media only screen and (min-width: 530px) and (max-width: 530px){
    /* .swiper-slide{
        width: 241px !important;
    } */
    .pannel1{
        left:-22px;
    }
    .wslidecta, .dslidecta, .sslidecta, .jslidecta{
        bottom: 3%;
        width: 60%;
        padding: 10px;
        left: 50%;
        transform: translateX(-50%);
    }
    .swiper-close {
        width: 55px;
    }
  }
   /* Tab Portrait */
  @media only screen and (min-width: 400px) and (max-width: 400px){
/* 
    .swiper-slide{
        width: 360px !important;
    } */
    .close{
        width:8%;
    }
    .desktop {
        width: 100%;
        height: 100%;
        position: absolute;
        background: url(../images/bgport.jpg)no-repeat !important;
        background-position: 30% 44%;
        background-size: 180%;
    }
    .girl{
        width: 44%;
        height: auto;
        display: block;
        top: 30%;
    }
    .panelsection {
        width: 80%;
        height: 80%;
        right: 7%;
        top: 10%;
    }
    .logo {
        width: 35%;
        top: 1%;
        right:17%;
        transform: scale(1.4) translate(-12%, 75%)!important;
    }
.panel {
    width: 40%;
    height: 100%;
    margin: 18px;
  }
  .pannel2{
    height: 100%;
    margin: 18px;
    right: -1% !important;
  }
  .pannel3{
    bottom: -61%;
    left: 0%;
  }
  .pannel4{
    bottom: -61%;
    right: -1% !important;
  }
  
    .swiper-close {
      width: 60px;
    }
  
    .innerlogo{
      display:none;
    }
    .frame{
      width: calc(100% - 40px);
      height: calc(90% - 40px);
      top: calc(10% + 20px);
    }
    .leftsection{
      width: 100%;
      height: 45%;
      top: 0%;
    }
    .righttsection{
      width: 100%;
      height: 55%;
      left: 0;
      top: 45%;
    }
    .wslide img, .dslide img, .sslide img, .jslide img{
      width: auto;
      height: 60% !important;
    }
    .wslidecta, .dslidecta, .sslidecta, .jslidecta{
      bottom: 3%;
      width: 40%;
      padding: 10px;
    }
    .wslidecta img, .dslidecta img, .sslidecta img, .jslidecta img{
      width: 100%;
      height: auto;
    }
    .swiper-button-prev{
        height:30px !important;
      left:80px;
      
    }
      .swiper-button-next{
        height:30px !important;
      right:80px;
    }
    
    .watchsideimg{
        background: url(../images/portwatchsideimg.jpg) no-repeat center center;
        background-size: 100%;
        background-position: 30% 20%;
    }
    .dresssideimg{
        background-size: 100%;
        background-position: 20% 0%;
    }
    .shoessideimg{
        background: url(../images/portshoessideimg.jpg) no-repeat center center;
        background-size: 100%;
        background-position: 20% 70%;
    }
    .jwellerysideimg{
        background: url(../images/portjwelerysideimg.jpg) no-repeat center center;
        background-size: cover;
    }
  
  
}
/* Mobile Portrait */
@media only screen and (min-width: 257px) and (max-width: 257px){
    .close{
        width:8%;
    }
  .desktop {
      width: 100%;
      height: 100%;
      position: absolute;
      background: url(../images/bgport.jpg)no-repeat !important;
      background-position: 30% 44%;
      background-size: 180%;
  }
  .girl{
      width: 44%;
      height: auto;
      display: block;
      top: 30%;
  }
  .panelsection {
      width: 90%;
      height: 80%;
      right: 5%;
      top: 10%;
  }
  .logo {
      width: 35%;
      top: 1%;
      right:17%;
      transform: scale(1.4) translate(-17%, 75%)!important;
  }
.panel {
  width: 40%;
  height: 100%;
  margin: 18px;
}
.pannel2{
  height: 100%;
  margin: 18px;
  right: -1% !important;
}
.pannel3{
  bottom: -61%;
  left: 0%;
}
.pannel4{
  bottom: -61%;
  right: -1% !important;
}
.swiper-close {
    width: 35px;
    top: -20px;
    right: -5px;
  }
  .tabsview {
      top:-10%;
  }

  .innerlogo{
    display:none;
  }
  .frame{
    width: calc(100% - 40px);
    height: calc(90% - 40px);
    top: calc(10% + 20px);
  }
  .leftsection{
    width: 100%;
    height: 40%;
    top: 0%;
  }
  
  .righttsection{
    width: 100%;
    height: 55%;
    left: 0;
    top: 45%;
  }
  .wslide img, .dslide img, .sslide img, .jslide img{
    width: auto;
    height: 60% !important;
  }
  .wslidecta, .dslidecta, .sslidecta, .jslidecta{
    bottom: 0%;
    width: 48%;
    padding: 10px;
  }
  .wslidecta img, .dslidecta img, .sslidecta img, .jslidecta img{
    width: 100%;
    height: auto;
  }
  .swiper-button-prev{
      height:30px !important;
    left:80px;
    
  }
    .swiper-button-next{
      height:30px !important;
    right:80px;
  }
  
  .watchsideimg{
      background: url(../images/portwatchsideimg.jpg) no-repeat center center;
      background-size: 100%;
      background-position: 30% 20%;
  }
  .dresssideimg{
      background-size: 100%;
      background-position: 20% 0%;
  }
  .shoessideimg{
      background: url(../images/portshoessideimg.jpg) no-repeat center center;
      background-size: 100%;
      background-position: 20% 70%;
  }
  .jwellerysideimg{
      background: url(../images/portjwelerysideimg.jpg) no-repeat center center;
      background-size: cover;
  }
  .link1{
    width: 55%;
    left: 23%;
  }
  .link2{
    width: 92%;
    left: 4%;     
  }
  .link3{
    width: 48%;
    left: 27%;
  }
.link4 {
        width: 48%;
        left: 29%;    
  }

}
/* Mobile Land */
@media only screen and (min-width: 458px) and (max-width: 458px){
.swiper-close {
    width: 50px;
}
.wslidecta, .dslidecta, .sslidecta, .jslidecta {
    bottom: 3%;
    width: 48%;
    padding: 10px;
    left: 50%;
    transform: translateX(-50%);
}
.pannel1{
    left: -3%;
}

.pannel2{
    right: 46%;
  }
  .pannel3{
    right: 21.5%;
  }
  .pannel4{
    right: -3%;
  }
}