/* mPopup box style */
    .mpopup {
        display: none;
        position: fixed;
        z-index: 1;
        padding-top: 150px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0,0.4);
    }
    .mpopup-content {
        z-index: -1;
        position:relative;
        background-color: #fefefe;
        margin: auto;
        padding: 0;
        width: 36%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s
    }
    
    .mpopup-head {
        padding: 2px 16px;
        background-color: #ff0000;
        color: white;
    }
    .mpopup-main {
        
        padding: 2px 16px;
        padding-left: 9%;
        padding-top: 4%;
        
    }
    .mpopup-main input[type="text"]{
        
        width: 86%;
        height: 31px;
        font-size: 15px;
        
    }
    .mpopup-main input[type="submit"]{
        padding: 5px;
        font-size: 15px;
        font-weight: bold;
        background-color: #333;
        outline: none;
        border: none;
        color: #fff;
        cursor: pointer;
        margin-left: 59%;
    }
    .mpopup-foot {
        padding: 2px 16px;
        background-color: #ff0000;
        color: #ffffff;
    }
    
    /* add animation effects */
    @-webkit-keyframes animatetop {
        from {top:-300px; opacity:0}
        to {top:0; opacity:1}
    }
    
    @keyframes animatetop {
        from {top:-300px; opacity:0}
        to {top:0; opacity:1}
    }
    
    /* close button style */
    .close {
        color: black;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }
    .close:hover, .close:focus {
        color: #070;
        text-decoration: none;
        cursor: pointer;
    }