/*popup display*/
.bg_overlay {
 width: 100%;
 background: rgba(0, 0, 0, 0.4);
 position: fixed;
 top: 0px;
 bottom: 0px;
 left: 0px;
 right: 0px;
 z-index: 999999999;
}
.bg_content {
 width: 90%;
 max-width: 500px;
 max-height: 100%;
 position: absolute;
 margin-right: -50%;
 top: 50%;
 left: 50%;
 margin-bottom: -50%;
 transform: translate(-50%, -50%);
 z-index: 9999;
 overflow: auto;
background: #fff;  
}
.bg_content img {
 max-width: 100%;
}
.pclose {
 background: #f91f1f;
 color: #fff !important;
 padding: 2px 9px 0px;
 top: 15px;
 right: 15px;
 display: block;
 position: absolute;
 cursor: pointer;
 font-size: 20px;
 border: 1px solid transparent;
 z-index: 99999999;
 text-decoration: navajowhite;
}
.pclose:hover {
 border-color:#fff;
}

/*info popup ***********************/
.info-msg {
 max-width: 550px;
 padding: 0 0 15px;
 border: 0;
 background: transparent;
}
.info-msg div {
 background:#fff;
 overflow: hidden;
 padding-bottom: 20px;
 background: url(../design_img/info-back.jpg) no-repeat center center;
 background-size: cover;
 border:5px solid #b15022;
 border-top:0
}
.info-msg h4 {
 text-align: left;
 margin: 0;
 padding: 10px 10px 10px 15px!important;
 background:#b15022;
 color: #fff;
 text-transform: uppercase;
}
.info-msg p {
 text-align: justify;
 padding: 10px 15px 0 15px!important;
 margin-bottom: 0px!important;
 font-size: 13px !important;
 font-weight:500;
 color:#000
}
.info-msg .pclose {
 background: #269934;
 color: #fff !important;
 padding: 10px 20px;
 cursor: pointer;
 float:right;
 margin: 10px 15px 0px 0!important;
 border-radius:3px;
 position: static!important;
 font-size: 13px;
}
.info-msg .pclose:hover {
 background:  #000!important;
}


/* Rank Achiever Greeting */

.rnk_overlay .bg_content{
     background:transparent;  
}
.rnk_overlay .pclose {
 top: 12px;
 right: 12px;
 font-size: 15px; padding: 2px 5px 2px;
}
.rnk-achiever {
 width: 500px;
 height: 500px;
 margin: 0px auto 0;
 font-size: 12px;
 line-height:15px;
 position:relative;
      
}
.rnk-achiever.emerald{
     background: #000 url(../design_img/emerald-rank-achiever.png) no-repeat top center;background-size: 100%;
}
.rnk-achiever.gold{
     background: #000 url(../design_img/gold-rank-achiever.png) no-repeat top center;background-size: 100%;
}
.rnk-achiever.platinum{
     background: #000 url(../design_img/platinum-rank-achiever.png) no-repeat top center;background-size: 100%;
}
.rnk-achiever.ruby{
     background: #000 url(../design_img/ruby-rank-achiever.png) no-repeat top center;background-size: 100%;
} 
.rnk-achiever.sapphire{
     background: #000 url(../design_img/sapphire-rank-achiever.png) no-repeat top center;background-size: 100%;
}
.rnk-achiever.silver{
     background: #000 url(../design_img/silver-rank-achiever.png) no-repeat top center;background-size: 100%;
}
.rnk-achiever.star{
     background: #000 url(../design_img/star-rank-achiever.png) no-repeat top center;background-size: 100%;
}

.rnk-achiever .achiver-info {
    width: 50%;
    position: absolute;
    left: 50%;
    top: 30%;
}
.rnk-achiever .achiver-info img {
 border-radius:100%;
 width:100px;
 height:100px;
 margin:0 auto 5px;
 display:table;
}
.rnk-achiever p {
 margin-bottom:0!important
}
.rnk-achiever p.achiver-name {
 color: #FFF;
 font-weight: 600;
 text-align:center;
}
.rnk-achiever p.achiver-id {
 color: #b9b9b9;
 font-weight: 500;
 font-size: 12px!important;
 text-align: center;
 line-height: 18px!important;
}
.rnk-achiever .whatsapp-share {
 color: #fff !important;
 font-weight: 500;
 font-size: 12px!important;
 text-align: center;
}
.rnk-achiever .whatsapp-share a {
 color: #fff !important;
}
.rnk-achiever .whatsapp-share .fa {
 margin-left: 8px;
 color: #3adf3a;
 font-size: 15px;
 vertical-align: -1px;
}  

@media only screen and (min-width:768px) and (max-width:991px) {
	
	
}

@media only screen and (min-width:320px) and (max-width:767px) {
	.rnk-achiever {
		width:250px;
		height:250px;
		margin: 0px auto 0;
		background: #000 url(../design_img/Emerald-RANK-ACHIEVER.png) no-repeat top center;
		background-size: 100%;
		font-size: 12px;
		line-height: 15px;
		position: relative;
	}
    .rnk-achiever .achiver-info img { 
        width: 50px;
        height: 50px; 
    }
    .rnk-achiever p.achiver-name { 
        font-size: 10px!important;
    }
    .rnk-achiever p.achiver-id { 
        font-size: 8px!important; 
        line-height: 8px!important;
    }
    .rnk-achiever .whatsapp-share { 
        font-size: 9px!important; 
    }
    .rnk-achiever .whatsapp-share .fa {
       
        margin-left: 5px; 
        font-size: 12px; 
    }
	
}