:root {
    --almostWhite: rgb(233,255,255);
    font-family: SegoeUI-Bold, Segoe UI;
    --bluish: rgb(22,177,198);
}


body {
    color: var(--almostWhite);
}


/* First Page Of Book */


div.bb-custom-firstpage, div.bb-custom-side {
    background: var(--bluish);
}

div.bookHead {
    background: var(--bluish);
}

.logoImage{
    border-radius: 15px;
    height: 45%;
}

.bb-custom-firstpage > .bookHead > .mercazName {
    font-size: 1.4em;
}




/* hugim */


.hugbox{
    width: auto;
    height: 45%;
}

.hugImage {
    height: 70%;
    padding: 0%;
}



@media only screen and (max-width: 600px){

    body {
        overflow: scroll !important;
        color: #777;
    }
    
    .book-navbar {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
    
    #logo {
        border-radius: 10px;
    }

    .logo-clicked {
        display: none;
        transition: display 1s ease-in;
    }

    .hoveret-clicked {
        display: none;
        transition: display 1s ease-in;
    }

    .book-clicked {
        height: 5%;
        transition: height 1s ease-in;
    }
    
    .space-holder1 {
        grid-column: span 5;
    }
    
    .space-holder2 {
        grid-column: span 2;
    }
    
    .book-title {
        color: var(--almostWhite);
        font-size: 1.5em;
    }
    
    #bb-bookblock{
        height: 5%;
    }
    
    #select-hugCategory{
        border: none;
        width: 33%;
        height: 26px;
        padding-left: 15%;
        margin-left: 10%;
        appearance: none;
        background-size: 20%;
        background: #fcb22d;
        color: var(--almostWhite);
        font-family: SegoeUI-Bold, Segoe UI;
        font-weight: bold;
        background-position: left 86px;
        background-repeat: repeat-y;
    }
    
    #select-hugCategory option {
        background: rgb(252,178,45);
        direction: rtl;
    }
    
    .hug-category-name span {
        color: var(--almostWhite);
        margin:auto;
        font-weight: 700;
	width:100%;
	text-align:center;
	display:block;
    }
    
    ul {
        list-style-type: none;
    }
    
    li {
        background: var(--almostWhite);
    }
    
    .hugbox {
        width: 100%;
        height: 18.97vh;
    }
    .hugName{
        float:none;
        font-size: 1.2em;
        font-weight: bold;
        color: #16aec5;
        text-align: end;
        display:inline-block;
        width:100%;
    }
    
    .hugim {
        background-position: center top;
        text-align: end;
        background-size: 100%;
        background-repeat-y: repeat;
        background-repeat-x: no-repeat;
        width: 90%;
        overflow: scroll;
        padding-top: 2%;
	    margin:auto;
	    display:none;
    }
    
    .active.hugim {display:block;}
    .hugInfo {
        width: 45%;
        font-size: 0.9em;
        display:inline-block;
        padding: 3%;
        /* margin-right: 10%; */
    }

    
    .hugImage img {
        object-fit: cover;
        max-width: 55vw;
        object-position: center;
        max-height: 100%;
        -webkit-mask-image: url(../images/MaskGroup3.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: 100%;
    }

    #bb-nav-last{
        background: none;
    }
    
    #bb-nav-next{
        background: none;
    }
    
    #bb-nav-prev{
        background: none;
    }
    
    #bb-nav-first{
        background: none;
    }
    
    .hugbox {
    margin: auto;
    height: 57vw;
    
    padding: 2vw;
    float: none;
    }

    .hugInfo {
        float: none;
        display: inline-block;
        width: 49%;
        padding: unset;
        margin: unset;
        
        max-height: 100%;
        overflow: hidden;
    }

    .hugImage {
        display: inline-block;
        width: 49%;
        max-width:unset;
        float: none;
        overflow: hidden;
        margin: unset;
        padding: unset;
        
        height: 75%;
        vertical-align: top;
    }
    .hugImage.hugImage-odd {
        -webkit-mask-image: url(../images/MaskGroup1.svg);
        -webkit-mask-size: 100%;
        -webkit-mask-repeat: no-repeat;
    }
    .hugImage.hugImage-even {
        -webkit-mask-image: url(../images/MaskGroup3.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: 100%;
    }
    .hugImage.hugImage-even img {
        margin-left: 5%;
    }
    .hugbox.hug-even {
        background: url(../images/mobile.png);
        background-size: 100%;
        background-repeat:no-repeat;

    }
    .hugbox.hug-odd {
        background: url(../images/mobile-up.png);
        background-size: 100%;
        background-repeat:no-repeat;
        margin-top: -18vw;    
        padding-top: 12vw;
    }
    .hugInfo-even{
        padding-right: 2%;
    }
    .hugInfo-odd{
        padding-left: 2%;
    }

    #bb-bookblock {
        position: fixed;
        height: 100vh;
        transition: 0.9s all ease-in-out;
        width: 100vw;
        background: var(--bluish);
        color: var(--almostWhite);
    }

    #bb-bookblock.active{
        height: 5vh;
        position: relative;
    }

    .book-head {
        margin-top: 66%;
        transition: 0.9s all ease-in-out;
    }

    .book-head.active {
        margin-top: 0%;
    }

    .hoveret.active{
        display: none;
    }

    @media only screen and (max-width: 400px){

        .hugImage.hugImage-even {
            -webkit-mask-size: 100%;
        }

        .hugbox.hug-odd {
            padding-top: 7vh;
        }

        .hugInfo.hugInfo-odd {
            margin-top: -5%;
        }

        .hugbox{
            height: 57vw;
        }

        .hug-category-name span{
            /*margin-left: 7%;*/
        }

        #select-hugCategory{
            width: 38%;
        }
    }

    @media only screen and (max-width: 350px){
        .hugImage.hugImage-even {
            -webkit-mask-size: 15vh;
        }
    }



}