@keyframes expandWidth {
    from {
        max-width: 0;
    }

    to {
        max-width: 350px; /*Related*/
    }
}

@keyframes expandHeight {
    from {
        max-height: 0;
    }

    to {
        max-height: 350px; /*Related*/
    }
}

    *::selection {
        background: none;
        cursor: default;
    }


/* FreeSize Box */
.article11 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.pMapsHolder {
    width: 100%;
    display: flex;
    /*flex-direction: row;*/
    flex-flow: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.paper {
    width: 300px; /*Related*/
    height: 300px; /*Related*/
    margin: 5px -0.5px !important;
    opacity: 0.80;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*background-color: rgb(33, 160, 248);*/
    transition: all .3s ease-in-out;
}

    .paper:hover {
        /*width: 350px;*/ /*Related*/
        opacity: 1;
        transition: all .3s ease-in-out;
    }

        .paper:hover > * {
            transform: scale(1.1, 1.1);
            transition: all ease-in-out .3s;
        }

    .paper:nth-child(odd) {
        background-color: rgb(38, 155, 250);
        clip-path: polygon(0% 0%, 0% 100%, 100% 90%, 100% 10%); /*Odds - Horizontal*/
        /*clip-path: polygon(0% 0%, 10% 100%, 90% 100%, 100% 0%);*/ /*Odds - Vertical*/
        /*animation: expandWidth 500ms ease-in-out forwards;*/ /*Animation for Odds*/
    }

    .paper:nth-child(even) {
        background-color: rgb(63, 166, 251);
        clip-path: polygon(0% 10%, 0% 90%, 100% 100%, 100% 0%); /*Evens - Horizontal*/
        /*clip-path: polygon(10% 0%, 0% 100%, 100% 100%, 90% 0%);*/ /*Evens - Vertical*/
        /*animation: expandWidth 250ms ease-in forwards;*/ /*Animation for Odds*/
    }

/* Top-Space */
.pMapImage {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 35%;
    width: 30%;
    transition: transform 500ms;
}

    .pMapImage > .imgHolder {
        position: absolute;
        width: 100%;
        height: 100%;
        display : flex ;
        justify-content : center ;
        align-items : center
    }

.imgHolder > img {
    width: 100%;
    height: 100%;
}

/* Bottom-Space */
.pMapDescription {
    display: flex;
    flex-direction: column;
    justify-content: center; /*H*/
    align-items: center; /*V*/
    height: 45%;
    transition: transform 500ms;
}

.pmDesHeading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*height: 35%;*/
    color: rgba(255, 255, 255, 1);
    padding : 7px ;
}

    .pmDesHeading > h3 {
        margin: 0;
        padding: 0;
        font-weight : bold
    }

.pmDesParagraph {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*height: 50%;*/
    color: rgb(174, 221, 253);
    font-weight: normal;
    direction: rtl;
    font-size: 14px;
    cursor: default;
    overflow: hidden;
    line-height: 20px;
    position: relative;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    padding: 0 25px;
}

    .pmDesParagraph > p {
        margin: 0;
        padding: 0;
    }

@media (max-width: 750px) {
    .article11{
        height : auto !important ;
    }
    .pMapsHolder {
        height: unset;
        flex-flow: column-reverse;
    }

    .paper {
        margin: 0;
    }

        .paper:hover {
            width: 300px; /*Related*/
            height: 350px;
            opacity: 1;
            transition: height 1000ms, opacity 500ms;
        }


        .paper:nth-child(odd) {
            background-color: rgb(38, 155, 250);
            clip-path: polygon(0% 0%, 8% 100%, 92% 100%, 100% 0%); /*Odds - Vertical*/
            animation: expandHeight 500ms ease-in-out forwards; /*Animation for Odds*/
        }

        .paper:nth-child(even) {
            background-color: rgb(63, 166, 251);
            clip-path: polygon(8% 0%, 0% 100%, 100% 100%, 92% 0%); /*Evens - Vertical*/
            animation: expandHeight 250ms ease-in forwards; /*Animation for Odds*/
        }

    .pmDesParagraph {
        padding: 0 35px;
    }
}