.black-ribbon {
    position: fixed;
    z-index: 9999;
    width: 110px;
    left: -5px;
    top: -5px;
    border: 0;
}

.close-x{
    position: absolute;
    top: 1%;
    right: 2%;
    font-size: 1.5em;
    color: #fff;
    cursor: pointer;
}
.my-modal{  
    width:100%;
    height:100%;
    position: fixed;
    top:0;
    z-index: 99999;
}
.my-modal-overy{  
    margin: 0 auto;
    background: url(../img/overlay.png);
    opacity: 0.8;
    width: 100%;
    height:100%;
    position: fixed;
    top:0%;
	left:0%;
	right:0%;
    z-index:15;
}.my-modal-centent{         
    position: fixed;
    width: 80%;
    /*height: 400px;*/
    background: #fff;
    border-radius: 6px;        
    top: 10%;
    left: 8%;
    background: rgba(0,0,0,0);
    z-index: 15;
    /* animation */
    -webkit-animation-duration: .5s;
    -webkit-animation-delay: .0s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -webkit-backface-visibility: visible!important;
    -webkit-animation-name: fadeInRight;
}
.my-modal-centent img {
    border: 0;
    margin: 0 auto; 
    z-index: 9999;
}    
@-webkit-keyframes fadeInRight{
    0%{
        opacity: 0;
        -webkit-transform: translateX(20px)
    }
    100%{
        opacity: 1;
        -webkit-transform: translateX(0)
    }
}

/* Dashboard */
.small-box {
    border-radius: 2px;
    position: relative;
    display: block;
    margin-bottom: 20px;
    box-shadow: 0 2px 2px rgb(0 0 0 / 20%);
    color: white;
}
.small-box>.inner {
    padding: 5px 5px 15px 10px;
}
.small-box .icon {
    -webkit-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    position: absolute;
    top: -10px;
    right: 10px;
    z-index: 0;
    font-size: 90px;
    color: rgba(0,0,0,0.15);
}
.small-box>.icon:hover{
    font-size: 100px;
    top: -20px;
}