*{
    margin:0;
    padding:0;
    outline:none;
    border:0;
    box-sizing:border-box
}
*:focus{
    outline:none
}





.categoryPanel{
    width:100%;
    padding:0px 70px 0px 120px;
    float:left
}
.categoryHead{
    width:100%;
    float:left
}
.categoryHead{
    width:100%;
    float:left;
    position:relative;
    margin-bottom:50px
}
.categoryHead h2{
    float:left;
    margin:0
}
.categoryView{
    float:right;
    list-style-type:none;
    font-size:21px;
    margin-top:18px;
    font-family:'MuseoSans-500';
    opacity:1;
    visibility:visible;
    -webkit-transition:all 0.5s ease;
    -ms-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease
}
.categoryView li{
    display:block;
    float:left;
    position:relative
}
.categoryView li:last-child{
    margin-left:20px;
    padding-left:20px
}
.categoryView li:last-child:before{
    display:block;
    position:absolute;
    left:0;
    top:50%;
    margin-top:-10px;
    width:1px;
    height:20px;
    background:#ccc;
    content:""
}
.categoryView li a{
    display:block;
    position:relative;
    padding-left:0px;
    color:#000;
    font-family: 'Crimson Text', serif;
    text-decoration: none;
    font-weight: bold;
}
.categoryView li a:after, .categoryView li a:before{
    position:absolute;
    width:27px;
    height:27px;
    content:"";
    top:0px;
    left:0;
    opacity:0;
    transition:all 0.5s ease;
    -webkit-transition:all 0.5s ease;
    -o-transition:all 0.5s ease;
    -ms-transition:all 0.5s ease
}
.categoryView li a:before{
    opacity:1
}
.categoryView li a.gridView:before{
    background-position:-360px -224px
}
.categoryView li a.gridView:after{
    background-position:-360px -273px
}
.categoryView li a.listView:before{
    background-position:-186px -223px
}
.categoryView li a.listView:after{
    background-position:-186px -273px
}
.no-touch .categoryView li a:hover, .categoryView li a.active{
    color:#006BB6;
    font-family: 'Crimson Text', serif;
    text-decoration: none;
    font-weight: bold;
}
.no-touch .categoryView li a:hover:before, .categoryView li a.active:before{
    opacity:0
}
.no-touch .categoryView li a:hover:after, .categoryView li a.active:after{
    opacity:1
}
.categoryView li a.active{
    cursor:default
}
.customSearch{
    float:right;
    width:60%;
    max-width:500px;
    position:absolute;
    top:4px;
    right:0;
    opacity:0;
    visibility:hidden;
    -webkit-transition:all 0.5s ease;
    -ms-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease
}
.showDetail .categoryView{
    opacity:0;
    visibility:hidden
}

.categoriesWrap{
    width:100%;
    float:left;
    position:relative;
    min-height:500px
}

.bubblesWrap{
    width:100%;
    float:left;
    position:relative;
    margin-bottom:9%;
    -webkit-transition:width 0.35s ease;
    -ms-transition:width 0.35s ease;
    transition:width 0.35s ease
}
.bubblesSizeImg{
    width:100%;
    display:block;
    opacity:0;
    -webkit-transition:all 0.35s ease;
    -ms-transition:all 0.35s ease;
    -moz-transition:all 0.35s ease;
    transition:all 0.35s ease
}
.bubbleList{
    list-style-type:none;
    width:100%;
    float:left
}
.bubbleList li{
    display:block;
    float:left;
    border-radius:100%;
    position:absolute;
    width:10%;
    top:0;
    -webkit-transition:left 0.35s ease, top 0.35s ease, width 0.35s ease;
    -ms-transition:left 0.35s ease, top 0.35s ease, width 0.35s ease;
    transition:left 0.35s ease, top 0.35s ease, width 0.35s ease;
    transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d
}
.bubbleList li:after{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background:#006BB6;
    border-radius:100%;
    -webkit-transition:transform 6s ease, background 0.5s ease;
    -ms-transition:transform 6s ease, background 0.5s ease;
    transition:transform 6s ease, background 0.5s ease;
    will-change:transform
}
.bubbleList li:hover:after, .bubbleList li:not(:nth-child(2)):not(:nth-child(4)):not(:nth-child(7)):not(:nth-child(14)):not(:nth-child(17)).active:after, .bubbleList li:not(:nth-child(2)):not(:nth-child(4)):not(:nth-child(7)):not(:nth-child(14)):not(:nth-child(17)).focus:after{
    -webkit-transform:scale(1.1);
    -ms-transform:scale(1.1);
    transform:scale(1.1);
    transition-delay:none;
    -ms-transition-delay:none;
    -webkit-transition-delay:none
}
.bubbleList li:nth-child(2).active:after, .bubbleList li:nth-child(4).focus:after, .bubbleList li:nth-child(7).active:after, .bubbleList li:nth-child(7).focus:after, .bubbleList li:nth-child(14).active:after, .bubbleList li:nth-child(14).focus:after, .bubbleList li:nth-child(17).active:after, .bubbleList li:nth-child(17).focus:after{
    -webkit-transform:scale(0.9);
    -ms-transform:scale(0.9);
    transform:scale(0.9);
    transition-delay:none;
    -ms-transition-delay:none;
    -webkit-transition-delay:none
}
.no-touch .bubbleList li:hover:after, .bubbleList li.activeColor:after{
    background:#000
}
.bubbleList li a{
    display:block
}
.bubbleBox{
    width:100%;
    float:left;
    position:relative;
    z-index:9
}
.bubbleBox h4{
    position:absolute;
    width:100%;
    top:50%;
    left:50%;
    font-size:25px;
    font-family: 'Crimson Text', serif;
    margin:0;
    text-align:center;
    -webkit-transition:font-size 0.35s ease;
    -ms-transition:font-size 0.35s ease;
    transition:font-size 0.35s ease;
    -webkit-transform:translate(-50% , -50%);
    -ms-transform:translate(-50% , -50%);
    transform:translate(-50% , -50%);
    color:#fff
}
.bubbleBox img{
    width:100%;
    display:block
}
.bubbleBox a{
    display:block;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    border-radius:100%;
    box-shadow:0 0 1px rgba(0, 0, 0, 0.05)
}
.bubbleList li:nth-child(1){
    top:11%;
    width:11%;
    left:0.2%
}
.bubbleList li:nth-child(2){
    top:8%;
    width:18%;
    left:14%
}
.bubbleList li:nth-child(3){
    top:1%;
    width:15.3%;
    left:37.5%
}
.bubbleList li:nth-child(4){
    top:0%;
    width:17%;
    left:61%
}
.bubbleList li:nth-child(5){
    top:5%;
    width:15%;
    left:85%
}
.bubbleList li:nth-child(6){
    top:29%;
    width:13%;
    left:1%
}
.bubbleList li:nth-child(7){
    top:35%;
    width:18%;
    left:18%
}
.bubbleList li:nth-child(8){
    top:24.5%;
    width:11%;
    left:33.5%
}
.bubbleList li:nth-child(9){
    top:21%;
    width:17%;
    left:48%
}
.bubbleList li:nth-child(10){
    top:23%;
    width:15%;
    left:70%
}
.bubbleList li:nth-child(11){
    top:42.5%;
    width:15%;
    left:38.5%
}
.bubbleList li:nth-child(12){
    top:46.5%;
    width:12.5%;
    left:59.5%
}
.bubbleList li:nth-child(13){
    top:46%;
    width:13%;
    left:77%
}
.bubbleList li:nth-child(14){
    top:52.5%;
    width:19%;
    left:2.5%
}
.bubbleList li:nth-child(15){
    top:57%;
    width:13%;
    left:26%
}
.bubbleList li:nth-child(16){
    top:63.5%;
    width:12%;
    left:48%
}
.bubbleList li:nth-child(17){
    top:65%;
    width:19%;
    left:64%
}
.bubbleList li:nth-child(18){
    top:74%;
    width:15%;
    left:14%
}
.bubbleList li:nth-child(19){
    top:74%;
    width:13%;
    left:33%
}
.bubbleList li:nth-child(20){
    top:82%;
    width:10%;
    left:50%
}
.bubbleList li:nth-child(21){
    top:93%;
    width:13%;
    left:26%
}
.bubbleList li:nth-child(22){
    top:95%;
    width:11%;
    left:42%
}
.bubbleList li:nth-child(23){
    top:91%;
    width:13%;
    left:62%
}
.showDetail .bubblesWrap{
    width:32%;
    margin-bottom:50px
}
.showDetail .bubbleBox h4{
    font-size:12px
}
.showDetail .bubblesSizeImg{
    width:150%
}
.showDetail .bubbleList li:nth-child(1){
    top:11%;
    width:16%;
    left:0.2%
}
.showDetail .bubbleList li:nth-child(2){
    top:5%;
    width:27%;
    left:19%
}
.showDetail .bubbleList li:nth-child(3){
    top:0%;
    width:23%;
    left:48%
}
.showDetail .bubbleList li:nth-child(4){
    top:10%;
    width:25%;
    left:72%
}
.showDetail .bubbleList li:nth-child(5){
    top:20%;
    width:22%;
    left:49%
}
.showDetail .bubbleList li:nth-child(6){
    top:27%;
    width:18.5%;
    left:29%
}
.showDetail .bubbleList li:nth-child(7){
    top:24%;
    width:27%;
    left:0%
}
.showDetail .bubbleList li:nth-child(8){
    top:41%;
    width:16%;
    left:22%
}
.showDetail .bubbleList li:nth-child(9){
    top:38%;
    width:25%;
    left:41%
}
.showDetail .bubbleList li:nth-child(10){
    top:31%;
    width:22%;
    left:69%
}
.showDetail .bubbleList li:nth-child(11){
    top:46%;
    width:22%;
    left:0%
}
.showDetail .bubbleList li:nth-child(12){
    top:55%;
    width:18%;
    left:22%
}
.showDetail .bubbleList li:nth-child(13){
    top:64%;
    width:18.5%;
    left:5%
}
.showDetail .bubbleList li:nth-child(14){
    top:58%;
    width:29.5%;
    left:40%
}
.showDetail .bubbleList li:nth-child(15){
    top:50%;
    width:18.5%;
    left:67%
}
.showDetail .bubbleList li:nth-child(16){
    top:65%;
    width:18%;
    left:71%
}
.showDetail .bubbleList li:nth-child(17){
    top:74%;
    width:29%;
    left:17%
}
.showDetail .bubbleList li:nth-child(18){
    top:82%;
    width:22%;
    left:48%
}
.showDetail .bubbleList li:nth-child(19){
    top:80%;
    width:18.5%;
    left:72%
}
.showDetail .bubbleList li:nth-child(20){
    top:95%;
    width:15%;
    left:68%
}
.showDetail .bubbleList li:nth-child(21){
    top:100%;
    width:15%;
    left:51%
}
.showDetail .bubbleList li:nth-child(22){
    top:97%;
    width:18%;
    left:31%
}
.showDetail .bubbleList li:nth-child(23){
    top:96%;
    width:19%;
    left:9%
}
.showDetail .bubbleList li:hover:after, .showDetail .bubbleList li.active:after, .showDetail .bubbleList li.focus:after{
    -webkit-transform:scale(1) !important;
    -ms-transform:scale(1) !important;
    transform:scale(1) !important
}
.categoriesDetails{
    width:60%;
    height:100%;
    position:absolute;
    top:0;
    right:0;
    opacity:0;
    -webkit-transition:opacity 0.5s ease, transform 1s ease;
    -ms-transition:opacity 0.5s ease, transform 1s ease;
    transition:opacity 0.5s ease, transform 1s ease;
    -webkit-transform:translateX(100%) translateZ(0);
    -ms-transform:translateX(100%) translateZ(0);
    transform:translateX(100%) translateZ(0)
}
.showDetail .categoriesDetails{
    opacity:1;
    width:60%;
    overflow-x:auto;
    -webkit-transform:translateX(0px);
    -ms-transform:translateX(0px);
    moz-transform:translateX(0px);
    transform:translateX(0px)
}
.catHeader{
    width:100%;
    float:left;
    margin-bottom:50px
}
.catHeader h2{
    color:#006BB6;
    font-size:36px;
    line-height:normal;
    float:left;
    margin:0;
    font-family: 'Crimson Text', serif;
}
.closeBtn{
    float:right;
    width:25px;
    height:25px;
    position:relative;
    overflow:hidden;
    text-indent:-99px
}
.closeBtn:after,.closeBtn:before{
    position:absolute;
    left:11px;
    top:-2px;
    content:'';
    height:29px;
    width:2px;
    background:#000;
    -webkit-transition:all 0.5s ease;
    -ms-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
    transition:all 0.5s ease
}
.closeBtn:before{
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    transform:rotate(45deg)
}
.closeBtn:after{
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    transform:rotate(-45deg)
}
.no-touch .closeBtn:hover:after, .no-touch .closeBtn:hover:before{
    background:#006BB6
}
.no-touch .loginPopup .closeBtn:hover:after, .no-touch .loginPopup .closeBtn:hover:before{
    background:#0091d0
}
.catListWrap{
    width:100%;
    float:left;
    position:relative;
    height:80%;
    height:calc(100% - 100px);
    overflow-y:auto
}
.iphone .showDetail .categoriesWrap{
    height:calc(100vh - 180px)
}
.catListWrap table{
    width:100%;
    float:left
}
.catListWrap table>img{
    display:block;
    margin:20px auto
}
.catListWrap table th, .catListWrap table td{
    padding:15px 15px 15px 0;
    font-family:'MuseoSans-500';
    vertical-align:top;
    border-bottom:1px solid #c6c6c6
}
.catListWrap table th{
    font-size:22px;
    color:#006BB6;
    font-weight:normal;
    text-align:left;
    width:20%;
    font-family: 'Crimson Text', serif;
    font-weight: bold;
}
.catListWrap table td{
    font-size:19px;
    min-width:120px;
    font-family: 'Crimson Text', serif;
}
.catListWrap table th:nth-child(1){
    width:60%
}
.catListWrap table th:nth-child(2){
    width:20%
}
.catListWrap table td:nth-child(2){
    padding-right:50px;
    word-break:break-word
}
.catListWrap table th:nth-child(3){
    width:20%
}

.catListWrap table td span{
    font-family:'MuseoSans-300';
    font-size:18px
}
.stockCheck{
    width:30px;
    height:30px;
    margin:0 auto;
    display:inline-block;
    position:relative;
    overflow:hidden
}
.stockCheck img{
    opacity:0
}
.stockCheck:after,.stockCheck:before{
    display:block;
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0;
    -webkit-transition:all 0.5s ease;
    -ms-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
    transition:all 0.5s ease
}
.stockCheck:before{
    opacity:1;
    background-position:-360px -71px
}
.stockCheck:after{
    background-position:-360px -115px
}
.no-touch .stockCheck:hover:before{
    opacity:0
}
.no-touch .stockCheck:hover:after{
    opacity:1
}
.listView .bubblesSizeImg, .listView .bubbleBox img{
    display:none
}
.listView .bubbleList li, .listView .bubbleBox a, .listView .bubbleBox h4{
    position:static !important;
    width:100% !important;
    float:left;
    transform:translate(0, 0) !important;
    -webkit-transform:translate(0, 0) !important;
    -o-transform:translate(0, 0) !important
}
.listView.showDetail .bubbleBox h4{
    font-size:14px
}
.listView.showDetail .bubblesWrap, .listView .bubblesWrap, .listView.showDetail .bubblesWrap{
    margin-bottom:0
}
.listView .bubbleBox h4 br{
    display:none !important
}
.listView .bubbleList li{
    margin:5px 0
}
.listView .bubbleList li a{
    padding:10px
}
.listView .bubbleList li:after{
    border-radius:0
}
.listView .bubbleList li:hover:after, .listView .bubbleList li.active:after, .listView .bubbleList li.focus:after{
    -webkit-transform:scale(1) !important;
    -ms-transform:scale(1) !important;
    transform:scale(1) !important
}
.listView .bubbleList li:hover:after, .listView .bubbleList li.active:after, .listView .bubbleList li.focus:after{
    -webkit-transform:scale(1) !important;
    -ms-transform:scale(1) !important;
    transform:scale(1) !important
}




.catListWrap table td.searchCategory{
    background:#f5f5f5;
    font-size:22px;
    line-height:normal;
    padding-left:20px;
    border-left:5px solid #ee3770;
    color:#ee3770
}
.catListWrap table td.blankTd{
    position:relative;
    padding:0
}
.catListWrap table td.blankTd:after{
    content:"";
    display:block;
    width:100%;
    height:2px;
    background:#fff;
    position:absolute;
    top:-1px;
    left:0
}

@media screen and (max-width:1700px){
   
    .catListWrap table th{
        font-size:18px
    }
    .catListWrap table td{
        font-size:16px;
        line-height:normal
    }
    .catListWrap table td span{
        font-size:14px;
        display:inline-block;
        margin-top:10px
    }
    .bottomBox table td img{
        width:150px
    }
    .bottomBox table td:nth-child(2){
        padding:0px 40px
    }
    .materialsPanel article{
        padding:100px 9%
    }
    .bubbleList li:nth-child(1){
        top:11%;
        width:15%;
        left:0.2%
    }
    .bubbleList li:nth-child(2){
        top:6%;
        width:18%;
        left:17%
    }
    .bubbleList li:nth-child(3){
        top:0%;
        width:19%;
        left:37%
    }
    .bubbleList li:nth-child(4){
        top:0%;
        width:17%;
        left:58%
    }
    .bubbleList li:nth-child(5){
        top:3%;
        width:18%;
        left:77%
    }
    .bubbleList li:nth-child(6){
        top:30%;
        width:18%;
        left:5%
    }
    .bubbleList li:nth-child(7){
        top:28%;
        width:18%;
        left:27%
    }
    .bubbleList li:nth-child(8){
        top:24%;
        width:15%;
        left:47%
    }
    .bubbleList li:nth-child(9){
        top:21%;
        width:17%;
        left:65%
    }
    .bubbleList li:nth-child(10){
        top:25%;
        width:17%;
        left:84%
    }
    .bubbleList li:nth-child(11){
        top:43%;
        width:13%;
        left:43%
    }
    .bubbleList li:nth-child(12){
        top:39%;
        width:13%;
        left:57%
    }
    .bubbleList li:nth-child(13){
        top:41%;
        width:18%;
        left:71%
    }
    .bubbleList li:nth-child(14){
        top:52.5%;
        width:20%;
        left:2.5%
    }
    .bubbleList li:nth-child(15){
        top:50%;
        width:19%;
        left:24%
    }
    .bubbleList li:nth-child(16){
        top:60%;
        width:18%;
        left:45%
    }
    .bubbleList li:nth-child(17){
        top:65%;
        width:21%;
        left:64%
    }
    .bubbleList li:nth-child(18){
        top:74%;
        width:18%;
        left:14%
    }
    .bubbleList li:nth-child(19){
        top:76%;
        width:16%;
        left:33%
    }
    .bubbleList li:nth-child(20){
        top:82%;
        width:17%;
        left:50%
    }
    .bubbleList li:nth-child(21){
        top:94%;
        width:15%;
        left:25%
    }
    .bubbleList li:nth-child(22){
        top:99%;
        width:14%;
        left:41%
    }
    .bubbleList li:nth-child(23){
        top:91%;
        width:14%;
        left:68%
    }
    .showDetail .bubblesWrap{
        margin-bottom:11%
    }
    .showDetail .bubbleList li:nth-child(1){
        top:11%;
        width:21%;
        left:0.2%
    }
    .showDetail .bubbleList li:nth-child(2){
        top:2%;
        width:25%;
        left:22%
    }
    .showDetail .bubbleList li:nth-child(3){
        top:0%;
        width:29%;
        left:49%
    }
    .showDetail .bubbleList li:nth-child(4){
        top:0%;
        width:26%;
        left:79%
    }
    .showDetail .bubbleList li:nth-child(5){
        top:20%;
        width:29%;
        left:66%
    }
    .showDetail .bubbleList li:nth-child(6){
        top:20%;
        width:27%;
        left:34%
    }
    .showDetail .bubbleList li:nth-child(7){
        top:28%;
        width:26%;
        left:8%
    }
    .showDetail .bubbleList li:nth-child(8){
        top:43%;
        width:23%;
        left:30%
    }
    .showDetail .bubbleList li:nth-child(9){
        top:40%;
        width:22%;
        left:55%
    }
    .showDetail .bubbleList li:nth-child(10){
        top:41%;
        width:26%;
        left:78%
    }
    .showDetail .bubbleList li:nth-child(11){
        top:63%;
        width:21%;
        left:26%
    }
    .showDetail .bubbleList li:nth-child(12){
        top:58%;
        width:23%;
        left:48%
    }
    .showDetail .bubbleList li:nth-child(13){
        top:61%;
        width:25%;
        left:72%
    }
    .showDetail .bubbleList li:nth-child(14){
        top:48%;
        width:29%;
        left:0%
    }
    .showDetail .bubbleList li:nth-child(15){
        top:72%;
        width:26%;
        left:0%
    }
    .showDetail .bubbleList li:nth-child(16){
        top:77%;
        width:25%;
        left:40%
    }
    .showDetail .bubbleList li:nth-child(17){
        top:82%;
        width:34%;
        left:67%
    }
    .showDetail .bubbleList li:nth-child(18){
        top:90%;
        width:28%;
        left:16%
    }
    .showDetail .bubbleList li:nth-child(19){
        top:99%;
        width:26%;
        left:43%
    }
    .showDetail .bubbleList li:nth-child(20){
        top:110%;
        width:27%;
        left:67%
    }
    .showDetail .bubbleList li:nth-child(21){
        top:121%;
        width:24%;
        left:43%
    }
    .showDetail .bubbleList li:nth-child(22){
        top:113%;
        width:24%;
        left:14%
    }
    .showDetail .bubbleList li:nth-child(23){
        top:103%;
        width:21%;
        left:-3%
    }
    
}


@media screen and (max-width:1366px){
    
    .catListWrap table td{
        min-width:80px
    }
    .catListWrap table td:nth-child(2){
        padding-right:20px
    }
    .catListWrap table th:nth-child(3){
        white-space:nowrap;
        text-align:center
    }
    .catListWrap table td:nth-child(3){
        text-align:center
    }
    
}


@media screen and (max-width:1024px){
  
    .bubbleList li:nth-child(1), .showDetail .bubbleList li:nth-child(1){
        top:11%;
        width:17%;
        left:0.2%
    }
    .bubbleList li:nth-child(2), .showDetail .bubbleList li:nth-child(2){
        top:4%;
        width:19%;
        left:18%
    }
    .bubbleList li:nth-child(3), .showDetail .bubbleList li:nth-child(3){
        top:0%;
        width:19%;
        left:38%
    }
    .bubbleList li:nth-child(4), .showDetail .bubbleList li:nth-child(4){
        top:0%;
        width:17%;
        left:58%
    }
    .bubbleList li:nth-child(5), .showDetail .bubbleList li:nth-child(5){
        top:3%;
        width:18%;
        left:77%
    }
    .bubbleList li:nth-child(6), .showDetail .bubbleList li:nth-child(6){
        top:30%;
        width:18%;
        left:8%
    }
    .bubbleList li:nth-child(7), .showDetail .bubbleList li:nth-child(7){
        top:25%;
        width:18%;
        left:27%
    }
    .bubbleList li:nth-child(8), .showDetail .bubbleList li:nth-child(8){
        top:22%;
        width:16%;
        left:47%
    }
    .bubbleList li:nth-child(9), .showDetail .bubbleList li:nth-child(9){
        top:21%;
        width:17%;
        left:65%
    }
    .bubbleList li:nth-child(10), .showDetail .bubbleList li:nth-child(10){
        top:24%;
        width:18%;
        left:84%
    }
    .bubbleList li:nth-child(11), .showDetail .bubbleList li:nth-child(11){
        top:43%;
        width:13%;
        left:43%
    }
    .bubbleList li:nth-child(12), .showDetail .bubbleList li:nth-child(12){
        top:39%;
        width:15%;
        left:57%
    }
    .bubbleList li:nth-child(13), .showDetail .bubbleList li:nth-child(13){
        top:42%;
        width:18%;
        left:73%
    }
    .bubbleList li:nth-child(14), .showDetail .bubbleList li:nth-child(14){
        top:52.5%;
        width:20%;
        left:2.5%
    }
    .bubbleList li:nth-child(15), .showDetail .bubbleList li:nth-child(15){
        top:47%;
        width:19%;
        left:24%
    }
    .bubbleList li:nth-child(16), .showDetail .bubbleList li:nth-child(16){
        top:57%;
        width:19%;
        left:50%
    }
    .bubbleList li:nth-child(17), .showDetail .bubbleList li:nth-child(17){
        top:64%;
        width:27%;
        left:69%
    }
    .bubbleList li:nth-child(18), .showDetail .bubbleList li:nth-child(18){
        top:74%;
        width:19%;
        left:13%
    }
    .bubbleList li:nth-child(19), .showDetail .bubbleList li:nth-child(19){
        top:70%;
        width:19%;
        left:33%
    }
    .bubbleList li:nth-child(20), .showDetail .bubbleList li:nth-child(20){
        top:82%;
        width:20%;
        left:50%
    }
    .bubbleList li:nth-child(21), .showDetail .bubbleList li:nth-child(21){
        top:95%;
        width:15%;
        left:25%
    }
    .bubbleList li:nth-child(22), .showDetail .bubbleList li:nth-child(22){
        top:101%;
        width:14%;
        left:41%
    }
    .bubbleList li:nth-child(23), .showDetail .bubbleList li:nth-child(23){
        top:96%;
        width:14%;
        left:71%
    }
    .bubblesWrap, .showDetail .bubblesWrap{
        margin-bottom:12%
    }
    .stockDetail .popupHeading{
        margin-bottom:10px
    }
    .bubblesWrap{
        width:100%;
        opacity:1;
        -webkit-transition:opacity 0.5s ease, transform 1s ease;
        -ms-transition:opacity 0.5s ease, transform 1s ease;
        -moz-transition:opacity 0.5s ease, transform 1s ease;
        transition:opacity 0.5s ease, transform 1s ease;
        -webkit-transform:translateX(0%);
        -ms-transform:translateX(0%);
        moz-transform:translateX(0%);
        transform:translateX(0%)
    }
    .showDetail .bubblesWrap{
        opacity:0;
        width:100%;
        -webkit-transform:translateX(-100%);
        -ms-transform:translateX(-100%);
        moz-transform:translateX(-100%);
        transform:translateX(-100%)
    }
    .categoriesDetails{
        height:calc(100vh - 200px)
    }
    .showDetail .categoriesWrap{
        max-height:calc(100vh - 150px);
        overflow:hidden
    }
    .categoriesDetails, .showDetail .categoriesDetails{
        width:100%
    }
    
}

@media screen and (max-width:767px){
    
    .bannerTxt, .achievementsPanel, .storyPanel, .foundingPanel, .contactBanner article, .contactFrm, .careerBanner article, .productBanner article, .letsGrowPanel, .offersPanel, .facilitiesPanel, .materialsPanel article,.categoryPanel,.aboutTxt{
        padding:25px
    }
    
    .circleBox h3{
        font-size:22px
    }
    
    .categoriesDetails{
        height:calc(100vh - 130px)
    }
    .categoryHead .viewChange{
        margin-right:0;
        margin-top:20px;
        font-size:22px
    }
    .categoryHead .viewChange:after, .categoryHead .viewChange:before{
        background-size:24px;
        background-position:center center
    }
    .customSearch{
        width:100%;
        top:55px;
        background:#fff;
        max-width:800px
    }
    .customSearch .searchTxt{
        border:0;
        border-bottom:1px solid #ccc;
        padding-left:0;
        height:40px
    }
    .customSearch .searchBtn{
        right:0;
        top:2px
    }
    .categoryHead,.catHeader{
        margin-bottom:30px
    }
    .bubblesSizeImg, .showDetail .bubblesSizeImg{
        width:250%
    }
    .bubbleBox h4{
        font-size:14px
    }
    .catHeader h2{
        font-size:20px;
        max-width:calc(100% - 30px)
    }
    .bubblesWrap, .showDetail .bubblesWrap{
        margin-bottom:70%
    }
    .bubbleList li:nth-child(1), .showDetail .bubbleList li:nth-child(1){
        top:11%;
        width:30%;
        left:0.2%
    }
    .bubbleList li:nth-child(2), .showDetail .bubbleList li:nth-child(2){
        top:4%;
        width:31%;
        left:28%
    }
    .bubbleList li:nth-child(3), .showDetail .bubbleList li:nth-child(3){
        top:0%;
        width:31%;
        left:60%
    }
    .bubbleList li:nth-child(4), .showDetail .bubbleList li:nth-child(4){
        top:15%;
        width:30%;
        left:55%
    }
    .bubbleList li:nth-child(5), .showDetail .bubbleList li:nth-child(5){
        top:21%;
        width:32%;
        left:24%
    }
    .bubbleList li:nth-child(6), .showDetail .bubbleList li:nth-child(6){
        top:29%;
        width:31%;
        left:68%
    }
    .bubbleList li:nth-child(7), .showDetail .bubbleList li:nth-child(7){
        top:35%;
        width:28%;
        left:40%
    }
    .bubbleList li:nth-child(8), .showDetail .bubbleList li:nth-child(8){
        top:48.5%;
        width:27%;
        left:44%
    }
    .bubbleList li:nth-child(9), .showDetail .bubbleList li:nth-child(9){
        top:30%;
        width:28%;
        left:0%
    }
    .bubbleList li:nth-child(10), .showDetail .bubbleList li:nth-child(10){
        top:42%;
        width:32%;
        left:11%
    }
    .bubbleList li:nth-child(11), .showDetail .bubbleList li:nth-child(11){
        top:57%;
        width:26%;
        left:3%
    }
    .bubbleList li:nth-child(12), .showDetail .bubbleList li:nth-child(12){
        top:60%;
        width:26%;
        left:30%
    }
    .bubbleList li:nth-child(13), .showDetail .bubbleList li:nth-child(13){
        top:44%;
        width:29%;
        left:71%
    }
    .bubbleList li:nth-child(14), .showDetail .bubbleList li:nth-child(14){
        top:58%;
        width:35%;
        left:61%
    }
    .bubbleList li:nth-child(15), .showDetail .bubbleList li:nth-child(15){
        top:71%;
        width:33%;
        left:40%
    }
    .bubbleList li:nth-child(16), .showDetail .bubbleList li:nth-child(16){
        top:70%;
        width:28%;
        left:10%
    }
    .bubbleList li:nth-child(17), .showDetail .bubbleList li:nth-child(17){
        top:83%;
        width:43%;
        left:11%
    }
    .bubbleList li:nth-child(18), .showDetail .bubbleList li:nth-child(18){
        top:74%;
        width:31%;
        left:74%
    }
    .bubbleList li:nth-child(19), .showDetail .bubbleList li:nth-child(19){
        top:87%;
        width:32%;
        left:56%
    }
    .bubbleList li:nth-child(20), .showDetail .bubbleList li:nth-child(20){
        top:102%;
        width:33%;
        left:66%
    }
    .bubbleList li:nth-child(21), .showDetail .bubbleList li:nth-child(21){
        top:103%;
        width:27%;
        left:36%
    }
    .bubbleList li:nth-child(22), .showDetail .bubbleList li:nth-child(22){
        top:103%;
        width:27%;
        left:6%
    }
    .bubbleList li:nth-child(23), .showDetail .bubbleList li:nth-child(23){
        top:116%;
        width:28%;
        left:20%
    }
    .categoryView li:last-child{
        margin-left:20px;
        padding-left:0px
    }
    .categoryView li:last-child:before{
        display:none
    }
   
    
}
@media screen and (min-width: 481px) and (max-width: 767px){
    .bubbleList li:nth-child(18), .showDetail .bubbleList li:nth-child(18){
        width:25%
    }
}