body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0px;
    background-color: black;
}

.spiral {
    width: 10%;
    height: 90%;
    position: absolute;
    left: 0px;
    top: 0px;
    background-image: url("../images/spiral.png");
    background-size: 100% 100%;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    background-color: rgba(230,220,220,0.3);
    z-index: 9999;
    margin-top: 5%;
    margin-bottom: 5%;
}
.menubox{width:100%;height:64px;margin-left:10px;margin-right:auto; margin-top:3px;display:block;position:fixed;
         background-color:rgba(0,0,0 0.7);text-align:center;color:white;font-weight:bold;font-size:24px; top:3px;        
}

.whatsapp,.call,.feedback{height:32px;background-color:transparent;margin-left:4px;
  color:white;font-weight:bold;
  font-size:18px;text-align:left;display:inline-block;  
}
.facebook1,.linkedin1,.twitter1,.share1,.loc1,.whatsapp1,.call1,.feedback1{background-position: 0 0px; background-size: 100% 100%; background-repeat:no-repeat;
                             margin-left:6px; border-radius:50%;width:32px;height:32px;
                             min-height:32px;min-width:32px;display:inline-block;
        border:none;box-shadow:2px 1px 1px black;
 -webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
.wat{color:white;text-decoration:none;}
.whatsapp1{background-image:url("../Images/whatsapp.png");border-bottom-left-radius:0px;}
.share1{background-image:url("../Images/share.png");}
.call1 {background-image:url("../Images/call.png");}
.feedback1{background-image:url("../Images/feedback.png");}
.loc1{background-image:url("../Images/map.png");}
.facebook1 {background-image:url("../Images/facebook.png");}
.linkedin1 {background-image:url("../Images/linkedin.png");}
 .twitter1{background-image:url("../Images/twitter.png");}
    .sharediv{position:fixed;top:0px;height:100%; margin:40px;width:100%;margin:auto;visibility:hidden;
              z-index:100000;font-size:11px;
              font-family:Tahoma ,Arial ,Verdana, Geneva, Tahoma, sans-serif;
    }
    .sharecontent{width:200px;height:155px;background-color:rgba(0,0,0, 0.6);margin:auto;border-radius:8px;display:block;overflow:hidden;}
/*.catflipi:hover , .facebook1:hover, .linkedin1:hover, .twitter1:hover, .whatsapp1:hover, .call1:hover, .feedback1:hover, .loc1:hover {
    -webkit-transform: rotate(360deg);
    outline: 0;
    animation: shake 0.5s;
    animation-iteration-count: infinite;
}*/
.pageNumber{visibility:hidden !important;max-height:0px !important;}
.currentPageIndexTextField{visibility:hidden !important;max-height:0px !important;}
.pagecurrentPageIndexTextField{visibility:hidden !important;max-height:0px !important;}


.catbutton{position:absolute;bottom:4px;left:calc(50% - 16px);width:32px;height:32px;z-index:890;background-color:black;border-radius:50%;
           background-image:url("../Images/menu.png");background-size:30px 30px;background-position:0px 0px;
}
.catsearch{position:absolute;bottom:4px;left:calc(50% + 1px);width:32px;height:32px;z-index:890;background-color:black;border-radius:50%;
           background-image:url("../Images/search.png");background-size:30px 30px;background-position:0px 0px;
}
.catdviflip {display:block;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;
             position:absolute;top:0px;left:0px;background-color:rgba(0,0,0, 0.8);z-index:900;}
.catflip{display:inline-block;width:172px;height:130px;margin:1px;position:relative;}
.catflipi{width:100%;height:100%;display:block;position:relative;}
.catfliptext{position:absolute;bottom:0px;left:0px;width:100%;color:white;text-align:center;height:30px;line-height:30px;background-color:rgba(0,0,0,0.5);}

    .whatsappl1 {
        background-image: url("../Images/whatsapp.png");
   }
.facebookl1{background-image: url("../Images/facebook.png");}
.twitterl1{background-image: url("../Images/twitter.png");}
.linkedinl1{background-image: url("../Images/linkedin.png");}
.whatsappl1, .facebookl1, .twitterl1, .linkedinl1 {    
    width: 100%;
    height: 28px;
    display: block;
    text-align: left;
    text-decoration: none;
    color: white;
    font-weight: bold;
    border:0px;
    background-color: transparent;
    background-size: 32px 32px;
    background-repeat: no-repeat;
    background-position: 3px 3px;
    padding-left: 38px;
    padding-top: 12px;
    padding-right: 40px;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
}
.facebookl1:hover, .linkedinl1:hover, .twitterl1:hover, .whatsappl1:hover {
    -webkit-transform: rotate(360deg);
    outline: 0;
    /*transform: rotate(360deg);*/
    animation: shake 0.5s;
    animation-iteration-count: infinite;
}



    @keyframes shake {
        0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

.content {
    display: block;
    width: 100%;
    height: 100%;
    display: block;
    color:white;  
}

.header {
    min-height: 0px;
    width: 100%;
    border: 0px;
    display: none;
}

.category {
    height: 60px;
    width: 100%;
    
    border: 0px;
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

.menu1 {
    position: relative;
    height: calc(100% - 60px);
    min-width: 100%;
    border: 1px solid;
    color: white;
    text-align: center;
    light-gray;
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
}
.menu2 {
    position: relative;
    height: calc(100% - 60px);
    min-width: 100%;
    border: 1px solid;
    color: white;
    text-align: center;
    light-gray;
    display: block;
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
}
.menu3 {
    position: relative;    
    height: 100%;/*calc(100% - 60px);*/
    min-width: 100%;
    border: 1px solid;
    color: white;
    text-align: center;
    light-gray;
    display: block;
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
    z-index:100;
}


h1 {
    font-size: 10px;
}

.thumb {
    position:relative;
    min-height: 60px;
    min-width: calc(100%/5 - 3px);
    width: calc(100%/5 - 3px);
    height: 60px;
    display: inline-table;
    margin: 0px;
    position: relative;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

    .thumb:hover {
        /*transform: rotateY(180deg);*/
    }

.thumbfront, .thumbback {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    background: red;
}

.thumbfront {
    background-color: #bbb;
    color: black;
}

.thumbback {
    background-color: black;
    color: white;
    transform: rotateY(180deg);
    line-height: 100%;
    text-align: center;
}
a {
    height: 100%;
    width: 100%;
    box-shadow: 2px 1px 1px white;
    -webkit-box-shadow: -7px 7px 7px rgba(0,0,0,0.5);
    -moz-box-shadow: -7px 7px 7px rgba(0,0,0,0.5);
    box-shadow: -7px 7px 7px rgba(0,0,0,0.5);
}
.menuthumb {
    
    min-height: 100%;
    min-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: fit;
    border-radius:0px;
    box-shadow:2px 1px 1px white;
    -webkit-box-shadow: -7px 7px 7px rgba(0,0,0,0.5);
    -moz-box-shadow: -7px 7px 7px rgba(0,0,0,0.5);
    box-shadow: -7px 7px 7px rgba(0,0,0,0.5);
}
  a:hover, .menuthumb:hover {
        transform: rotateY(360deg);
    }

.catext{width:100%;height:20px;background-color:rgba(0,0,0, 0.2);position:absolute;top:3px;left:1px;color:white;border-radius:6px;}

.menuimg {
    min-height: 100%;
    min-width: 100%;
    height: 100%;
    width: 100%;
    /*transition: transform 2s;
    transform-style: preserve-3d;*/
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    object-fit: fit;
    border-bottom: 5px solid #eee;
    border-right: 10px solid transparent;
    -webkit-box-shadow: -7px 7px 7px rgba(0,0,0,0.5);
    -moz-box-shadow: -7px 7px 7px rgba(0,0,0,0.5);
    box-shadow: -7px 7px 7px rgba(0,0,0,0.5);
}

    .menuimg:hover {
        transform: rotateY(360deg);
    }



    /*BOOK*/
.scene {
    width: 90%;
    height: 90%;
    margin: 5%;
    perspective: 1000px;
}

.book {    
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.page {
    cursor: pointer;
    position: absolute;
    color: black;
    width: 100%;
    height: 100%;
    transition: 3s transform;
    transform-style: preserve-3d;
    transform-origin: left center;
}

.front,
.back {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0% 0% 0%;
    box-sizing: border-box;
    backface-visibility: hidden;
    background: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#FFFFFF), to(#CCCCCC));
    background: linear-gradient(to bottom right, #fff, #ccc);
}

.back {
    transform: rotateY(180deg);
}

.page.active {
    z-index: 1;
}

.page.flipped {
    transform: rotateY(-180deg);
}

    .page.flipped:last-of-type {
        z-index: 1;
    }

@media (orientation: portrait) {
    .catflip{width:calc(50% - 2px);height:calc((100% / 4) - 5px); } 
    body {
        flex-direction: column;
    }
}