.Item_PicDiv, .PicDivContainer {
    display: inline-block;
    width: 100%;
    height: calc(100% - 155px);
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    float: right;
    margin:0px;
    padding:0px;
    box-sizing: border-box;
    transition: ease-in-out 0.3s;
    -webkit-transition: ease-in-out 0.3s;
    /*border:1px solid blue;*/
}

    

.ItemMidContainer {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    /*border: 1px solid red;*/
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    transition: ease-in-out 0.3s;
    -webkit-transition: ease-in-out 0.3s;
}

.GroupMidContainer {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #f2f2f2;
    border-radius: 6px;
    transition: ease-in-out 0.3s;
    -webkit-transition: ease-in-out 0.3s;
}


.PicDivEffect4, .PicDivEffect5, .PicDivEffect6, .PicDivEffect7 {
    /*مواصفات الإطار الأوسط*/
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 1.2s;
    transform-style: preserve-3d;
    border-radius: 6px;
    box-sizing: border-box;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    /*border: 1px solid gray;*/
}


.PicDivEffect0, .PicDivEffect1, .PicDivEffect2, .PicDivEffect3  {

}

.PicDivContainer:hover, .GroupPicContainer:hover {
    z-index: 50;       
}

/*EFFECTS content HOVER----------------------------------------------------------------------------------------------*/
/*زووم لخارج الإطار*/
.PicDivContainer:hover .PicDivEffect0, .GroupPicContainer:hover .PicDivEffect0 {
    
}

.PicDivContainer:hover .PicDivEffect1, .GroupPicContainer:hover .PicDivEffect1 {
    transform: scale(1.1,1.1);
    z-index: 5;
}

    /*زووم داخل الإطار*/
.PicDivContainer:hover .PicDivEffect2, .GroupPicContainer:hover .PicDivEffect2 {
    transform: scale(1.1,1.1);
}

    /*إظهار ظل مع دوران خفيف حول المركز*/
.PicDivContainer:hover .PicDivEffect3, .GroupPicContainer:hover .PicDivEffect3 {
    box-shadow: 10px 10px 20px black;
    transform: rotate(4Deg);
    z-index: 5;
}

    /*دوران أفقى مع إظهار الخلفية */
.PicDivContainer:hover .PicDivEffect4, .GroupPicContainer:hover .PicDivEffect4 {
    transform: rotateY(180deg);
    z-index: 5;
}
.PicDivContainer:hover .PicDivEffect5, .GroupPicContainer:hover .PicDivEffect5 {
    transform: rotateY(180deg);
    z-index: 5;
}

/*دوران رأسى مع إظهار الخلفية */
.PicDivContainer:hover .PicDivEffect6, .GroupPicContainer:hover .PicDivEffect6 {
    transform: rotateX(180deg);        
    z-index: 6;
}
.PicDivContainer:hover .PicDivEffect7, .GroupPicContainer:hover .PicDivEffect7 {
    transform: rotateX(180deg);
    z-index: 5;
}


    /*تأثير الكلام فى حالة الدوران وإظهار الخلفية*/
.PicDivContainer:hover .flip-card-back-text, .flip-card-back-image, .GroupPicContainer:hover .flip-card-back-text, .flip-card-back-image {
    padding: 5px;
    padding-top:58px;   
    text-shadow: 2px 2px 10px silver;
}

.flip-card-front, .flip-card-back-text, .flip-card-back-image {
    position: absolute;
    top:0px;left:0px;
    width: 100%;
    height: 100%;
    border-radius:6px;
    background-position:center center;
    background-size:cover;
    background-repeat:no-repeat; 
    box-sizing:border-box;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}


.flip-card-back-text {
    background-color: black;
    font: bold 18px OurFont;
    text-align:center;
    text-justify:distribute;
    color: white;
    /*transform: rotateX(180deg);*/
    padding-top: 5px;  
    padding-right:5px; padding-left:5px; padding-bottom:5px;
    overflow: hidden;
    border-radius:6px;
    transition: ease-in-out 1.5s;
    -webkit-transition: ease-in-out 1.5s;
}

.flip-card-back-image {
    /*transform: rotateX(180deg);*/
    background-color: white;
    border-radius: 6px;
    transition: ease-in-out 1.5s;    
    -webkit-transition: ease-in-out 1.5s;
}

    
/******************************************************************************************************/
.TopMnuButton {
    margin: 7px;
    display: inline-block;
    position: relative;
    cursor: pointer;
    font: bold 24px arial;
    text-align: center;
    line-height: 100%;    
    text-shadow: 2px 2px black;
    color: darkorange;
    padding: 0px;
    text-decoration: none;
    box-sizing: border-box;
    width: var(--iw);
    height: var(--iw);
    /*border:1px solid black;*/
}

.TopMnuButton:hover {
    width: var(--nw);
    height: var(--nw);
    margin: 1px;
}

.HEffect0Class {
    position: relative;   
}

.VEffect0Class {
    position: relative;
}

.HEffect1Class {
    position: relative;
    animation-name: HEffect1;
    animation-duration: calc(0.5s * var(--i));    
}

.VEffect1Class {
    position: relative;
    animation-name: VEffect1;
    animation-duration: calc(0.4s * var(--i));
    /*animation-play-state:paused;*/
}

@keyframes HEffect1 {
    0% {        
        left: 0px;
        top: calc(-1000px * var(--i));
        z-index: 50000;
    }
    50% {       
        left: 0px;
        top: 0px;
        z-index: 50000;
    }
    100% {        
        left: 0px;
        top: 0px;
        z-index: 50000;
    }
}

@keyframes VEffect1 {
    0% {
        left: 0px;
        top: calc(-1000px * var(--i));
        z-index: 50000;
    }

    50% {
        left: 0px;
        top: 0px;
        z-index: 50000;
    }

    100% {
        left: 0px;
        top: 0px;
        z-index: 50000;
    }
}