*{
    margin: 0; padding: 0;
}
a{
	text-decoration:none;
}
body{
	background-color:#fafaf2; font-family: 'Philosopher-Regular', sans-serif;
    background-image: url('../images/bg-fon.png');
}
@font-face {
  font-family: 'Philosopher-Regular';
  src: url('../font/Philosopher-Regular.eot');
  src: url('../font/Philosopher-Regular.eot?#iefix') format('embedded-opentype'),
       url('../font/Philosopher-Regular.svg#Philosopher-Regular') format('svg'),
       url('../font/Philosopher-Regular.ttf') format('truetype'),
       url('../font/Philosopher-Regular.woff') format('woff'),
       url('../font/Philosopher-Regular.woff2') format('woff2'); 	
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Philosopher-Bold';
  src: url('../font/Philosopher-Bold.eot');
  src: url('../font/Philosopher-Bold.eot?#iefix') format('embedded-opentype'),
       url('../font/Philosopher-Bold.svg#Philosopher-Bold') format('svg'),
       url('../font/Philosopher-Bold.ttf') format('truetype'),
       url('../font/Philosopher-Bold.woff') format('woff'),
       url('../font/Philosopher-Bold.woff2') format('woff2');	   
  font-weight: normal;
  font-style: normal;
}
#content-main{
	width:1100px;
	margin:0 auto;    
}
.menu{
   margin-top:20px; text-align:center;	
}
.menu a{
   display:inline-block; background:#8a493c; border-radius:10px;
   font-weight:700; color:#fff; font-size:20px; text-transform:uppercase;
   padding:0 30px; height:50px; line-height:50px; margin-right:15px;
   -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s;   
}
.menu a:hover{
   background-color:#2c439c;
}
.map{
	margin-top:50px; position:relative;
}
.map img{
    display:block; margin:0 auto;	
}

@keyframes myanimation{
	/*0% { background-color: rgb(249,53, 9); }
    50% { background-color:  rgb(255, 212, 0); }
    100% { background-color: rgb(25, 44, 138); }*/
	0% { background-image: url('../images/icon.png'); }
    50% { background-image: url('../images/icon2.png'); }
    100% { background-image: url('../images/icon.png');}
}
.sar-round{
	width:45px; height:45px; 
	position:absolute; top: 25%; left: 18%;
	animation: myanimation 2s linear infinite; z-index:1;
}
.moin-round{
	width:45px; height:45px; 
	position:absolute; top: 35%; left: 50%;
	animation: myanimation 2s linear infinite; z-index:1;
}
.talas-round{
	width:45px; height:45px; 
	position:absolute; top: 55%; left: 25%;
	animation: myanimation 2s linear infinite; z-index:1;
}
.bayzak-round{
	width:45px; height:45px; 
	position:absolute; top: 65%; left: 37%;
	animation: myanimation 2s linear infinite; z-index:1;
}
.kulan-round{
	width:45px; height:45px; 
	position:absolute; top: 75%; left: 47%;
	animation: myanimation 2s linear infinite; z-index:1;
}
.merke-round{
	width:45px; height:45px; 
	position:absolute; top: 70%; left: 60%;
	animation: myanimation 2s linear infinite; z-index:1;
}
.shu-round{
	width:45px; height:45px; 
	position:absolute; top: 57%; left: 70%;
	animation: myanimation 2s linear infinite; z-index:1;
}
.korday-round{
	width:45px; height:45px; 
	position:absolute; top: 66%; left: 82%;
	animation: myanimation 2s linear infinite; z-index:1;
}
.zhuali-round{
	width:45px; height:45px; 
	position:absolute; top: 84%; left: 22%;
	animation: myanimation 2s linear infinite; z-index:1;
}
.zhambyl-round{
	width:45px; height:45px; 
	position:absolute; top: 71%; left: 26%;
	animation: myanimation 2s linear infinite; z-index:1;
}
.taraz-round{
	width:45px; height:45px;
	position:absolute; top: 80%; left: 30%;
	animation: myanimation 2s linear infinite; z-index:1;
}