.title{
background: url('../img/title.png');
width: 450px;
height: 320px;
position: absolute;
}

footer{
border-top: 2px solid#6DC7D0;
background: #C5F1F5;
border-bottom: 2px solid#6DC7D0;
padding: 10px;
font-family: 'Andika', sans-serif;
bottom: 0;
width: 100%;
font-size: 17px;
}
.wrapper{
	margin:0 auto;
	background: url('../img/map.png');
    width: 1200px;
    height: 753px;
	position: relative;
	margin-bottom: 60px;
    }
.map{
 
}

.map1-hover:hover,  i-1:hover > .map1-hover  {
	opacity: 1;
}
.map1{
	position: absolute;
	width: 188px;
	height: 121px;
	left: 514px;
	top: 0px;
}

.map1-hover{
	background: url('../img/1.png');
	width: 211px;
    height: 138px;
	opacity: 0;
}

.map2{
	position: absolute;
	  width: 158px;
    height: 154px;
    top: 44px;
left: 648px;
}
.map2-hover{
	background: url('../img/2.png');
    width: 158px;
    height: 155px;
	opacity: 0;
}

.map2-hover:hover,  i-2:hover > .map2-hover  {
	opacity: 1;
}

.map3{
	position: absolute;
	width: 251px;
	height: 218px;
	left: 479px;
    top: 93px;

}
.map3-hover{
	background: url('../img/3.png');
	width: 238px;
    height: 187px;
	opacity: 0;
}
.map3-hover:hover,  i-3:hover > .map3-hover  {
	opacity: 1;
}

.map4{
	position: absolute;
	width: 190px;
	height: 162px;
	    left: 815px;
    top: 80px;
}
.map4-hover{
background: url('../img/4.png');
position: relative;
    width: 177px;
    height: 150px;
opacity: 0;
}
.map4-hover:hover,  i-4:hover > .map4-hover  {
	opacity: 1;
}
.map5{
	position: absolute;
	width: 321px;
	height: 198px;
	left: 439px;
    top: 177px;
}

.map5-hover{
background: url('../img/5.png');
    width: 305px;
    height: 190px;
opacity: 0;
}
.map5-hover:hover,  i-5:hover > .map5-hover  {
	opacity: 1;
}

.map6{
	position: absolute;
	width: 188px;
	height: 138px;
	left: 698px;
    top: 236px;
}
.map6-hover{
	background: url('../img/6.png');
	 width: 179px;
    height: 127px;

	opacity: 0;
}
.map6-hover:hover,  i-6:hover > .map6-hover  {
	opacity: 1;
}
.map7{
	position: absolute;
	width: 190px;
	height: 184px;
	left: 754px;
    top: 145px;
}
.map7-hover{
	background: url('../img/7.png');
	width: 181px;
    height: 172px;
	opacity: 0;
}
.map7-hover:hover,  i-7:hover > .map7-hover  {
	opacity: 1;
}
.map8{
	position: absolute;
	width: 267px;
	height: 197px;
	left: 810px;
    top: 228px;
}
.map8-hover{
	background: url('../img/8.png');
	width: 258px;
    height: 186px;
	opacity: 0;
}
.map8-hover:hover,  i-8:hover > .map8-hover  {
	opacity: 1;
}
.map9{
	position: absolute;
	width: 337px;
	height: 162px;
	left: 165px;
    top: 308px;
}
.map9-hover{
	background: url('../img/9.png');
	width: 325px;
    height: 147px;
	opacity: 0;
}
.map9-hover:hover,  i-9:hover > .map9-hover  {
	opacity: 1;
}
.map10{
	position: absolute;
	width: 90px;
	height: 128px;
	left: 316px;
    top: 322px;
}
.map10-hover{
	background: url('../img/10.png');
	 width: 80px;
    height: 116px;

	opacity: 0;
}
.map10-hover:hover,  i-10:hover > .map10-hover  {
	opacity: 1;
}
.map11{
	position: absolute;
	width: 242px;
	height: 214px;
	left: 378px;
    top: 369px;
}
.map11-hover{
background: url('../img/11.png');
width: 234px;
    height: 203px;
opacity: 0;
}
.map11-hover:hover,  i-11:hover > .map11-hover  {
	opacity: 1;
}
.map12{
	position: absolute;
	width: 108px;
	height: 72px;
	left: 549px;
    top: 354px;
}
.map12-hover{
background: url('../img/12.png');
width: 102px;
height: 72px;
opacity: 0;
}
.map12-hover:hover,  i-12:hover > .map12-hover  {
	opacity: 1;
}
.map13{
	position: absolute;
	width: 244px;
	height: 184px;
	left: 576px;
    top: 317px;

}
.map13-hover{
	background: url('../img/13.png');
	    width: 240px;
    height: 174px;
	opacity: 0;
}
.map13-hover:hover,  i-13:hover > .map13-hover  {
	opacity: 1;
}
.map14{
	position: absolute;
	width: 214px;
	height: 143px;
	    left: 858px;
    top: 353px;
}
.map14-hover{
background: url('../img/14.png');
width: 202px;
    height: 134px;
opacity: 0;
}
.map14-hover:hover,  i-14:hover > .map14-hover  {
	opacity: 1;
}
.map15{
	position: absolute;
	width: 463px;
	height: 261px;
	left: 5px;
    top: 431px;
}
.map15-hover{
background: url('../img/15.png');
    width: 452px;
    height: 243px;
opacity: 0;
}
.map15-hover:hover,  i-15:hover > .map15-hover  {
	opacity: 1;
}
.map16{
	position: absolute;
	width: 261px;
	height: 177px;
	    left: 298px;
    bottom: 34px;
}
.map16-hover{
background: url('../img/16.png');
    width: 253px;
    height: 174px;
opacity: 0;
}
.map16-hover:hover,  i-16:hover > .map16-hover  {
	opacity: 1;
}
.map17{
	position: absolute;
	width: 153px;
	height: 181px;
	    left: 539px;
    bottom: 42px;
}
.map17-hover{
background: url('../img/17.png');
width: 144px;
height: 171px;
opacity: 0;
}
.map17-hover:hover,  i-17:hover > .map17-hover  {
	opacity: 1;
}
.map18{
	position: absolute;
	width: 292px;
	height: 178px;
	left: 553px;
    bottom: 114px;
}
.map18-hover{
background: url('../img/18.png');
    width: 287px;
    height: 168px;
opacity: 0;
}
.map18-hover:hover,  i-18:hover > .map18-hover  {
	opacity: 1;
}
.map19{
	position: absolute;
	width: 226px;
	height: 315px;
	    left: 784px;
    bottom: 53px;
}
.map19-hover{
background: url('../img/19.png');
    width: 219px;
    height: 304px;
opacity: 0;
}

.map19-hover:hover,  i-19:hover > .map19-hover  {
	opacity: 1;
}
.map20{
	position: absolute;
	width: 275px;
	height: 297px;
	right: -6px;
    bottom: -5px;
}
.map20-hover{
background: url('../img/20.png');
    width: 265px;
    height: 283px;
opacity: 0;
}
.map20-hover:hover,  i-20:hover > .map20-hover  {
	opacity: 1;
}

.picto1{
 position: absolute;
 border-radius: 10px; 
 box-shadow: 0 0 9px #A8A8A8;
}
.picto{
 position: absolute;
 transition: all .2s ease-in-out;

}
.picto:hover{
	transform: scale(1.5);
}
.button{
 position: absolute;
 transition: all .2s ease-in-out;

}
.button:hover {
	animation: bounce 1s;
}

@keyframes bounce {
	0%, 20%, 60%, 100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	40% {
		-webkit-transform: translateY(-10px);
		transform: translateY(-10px);
	}

	80% {
		-webkit-transform: translateY(-5px);
		transform: translateY(-5px);
	}
}

.descr{
    display:none;
    display: none;
    padding: 10px;
    background: #03A9F4;
    height: 20px;
    -moz-box-shadow: 0 5px 5px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 5px 5px rgba(0,0,0,0.3);
    box-shadow: 0 5px 5px rgba(0,0,0,0.3);
    color: #fff;
    font-size: 20px;
	width: 250px;
    border-bottom: 4px solid #02cfff;
}
.poster:hover .descr{
    display:block;
    position:absolute;
    /*top:120px;*/
    z-index:9999;
	
    
}