.ping1,
.ping2,
.ping3{position:absolute;z-index:88;left:50%;top:50%;display:block;content:"";-webkit-border-radius:116px;-moz-border-radius:116px;border-radius:116px;border:2px solid #027B36;
  	transition:all 0.2s ease-in-out;
-webkit-transition:all 0.2s ease-in-out;
   -moz-transition:all 0.2s ease-in-out;
	 -o-transition:all 0.2s ease-in-out;
	width:0;
	height:0;
	margin-left:-2px;
	margin-top:-2px;}

.dot:hover .ping1,
.dot:hover .ping2,
.dot:hover .ping3 {
			transition:all 0.75s ease-out;
	-webkit-transition:all 0.75s ease-out;
	   -moz-transition:all 0.75s ease-out;
		 -o-transition:all 0.75s ease-out;
}
.dot:hover .ping1 { width:90px;height:90px; margin-left:-45px;margin-top:-45px; }
.dot:hover .ping2{width:56px;height:56px;margin-left:-28px;margin-top:-28px; 
	   -moz-transition-delay:0.2s;
	-webkit-transition-delay:0.2s;
	     -o-transition-delay:0.2s;
			transition-delay:0.2s;}
.dot:hover .ping3{width:30px;height:30px;margin-left:-15px;margin-top:-15px;
	   -moz-transition-delay:0.5s;
	-webkit-transition-delay:0.5s;
	     -o-transition-delay:0.5s;
			transition-delay:0.5s;}


.dot{
	position:absolute;z-index:99;width:6px;height:6px;background:#027B36;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;cursor:pointer;}

#map{position:relative;margin:5% auto;width:638px;}

.text1{position:absolute;left: -40px;top: -5px;color: #000;font-size: 11px;}
.text2{position:absolute;left: -30px;top: 0px;color: #000;font-size: 11px;}
.text3{position:absolute;left: 5px;top: 0px;color: #000;font-size: 11px;}
.text4{position:absolute;left: -60px;top: 0px;color: #000;font-size: 11px;}

#tanger{left:81%;top:5%;}
#kenitra{left:79.5%;top:14%;}
#rabat{left:78.6%;top:16.3%;}
#oujda{left:92.6%;top:11%;}
#meknes{left:82%;top:21%;}
#settat{left:78%;top:22.3%;}
#benimellal{left:80%;top:25%;}
#marrakech{left:77%;top:27%;}
#errachidia{left:88%;top:31%;}
#agadir{left:70.4%;top:37%;}

.text-hidden{display:none;}