.title{
background: url('../img/title.png');
width: 474px;
height: 163px;
margin: 0 auto;
margin-top: -249px;
    position: relative;
 
}
.title:hover{

}

.top{
    margin: 0 auto;
     width: 700px;
}

.qwest-map{
	background: url('../img/qwest.png');
	width: 158px;
	height: 158px;
	left: 20px;
    position: relative;
	float: left;
}
.qwest-map:hover {
left: 0px;
    position: relative;
transition: all .3s ease-in-out;
}

.ship{
	background: url('../img/ship.png');
	width: 156px;
	height: 173px;
	left: 527px;
  position: relative;
  top: -64px;

}
ship:hover {
left: 284px;
position: relative;
transition: all .3s ease-in-out;
}


.object {
    /**position: absolute;**/
	top: 87px;
    left: 400px;
}

.object {
    position: relative;;
    transition: all 3s ease-in-out;
    -webkit-transition: all 3s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 3s ease-in-out; /** Firefox **/
    -o-transition: all 3s ease-in-out; /** Opera **/
}
#axis:hover .move-right{
    transform: translate(80px,0);
    -webkit-transform: translate(80px,0); /** Chrome & Safari **/
    -o-transform: translate(80px,0); /** Opera **/
    -moz-transform: translate(80px,0); /** Firefox **/
}

footer{

}
.wrapper{
	margin:0 auto;
	background: url('../img/atlas.png');
    width: 1200px;
    height: 585px;
	position: relative;
	
    }

.map1:hover,  i-1:hover > .map1-hover  {
	opacity: 1;
}
.map1{
	position: absolute;
	width: 404px;
	height: 362px;
	left: 0px;
	top: 4px;
	background: url('../img/north-america.png');
	opacity:0;
}



.map2{
	position: absolute;
	width: 215px;
	height: 166px;
	left: 316px;
    top: -1px;
	background: url('../img/greenland.png');
	opacity:0;
}
.map2:hover{
		opacity: 1;
}

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

.map3{
	position: absolute;
	width: 661px;
	height: 415px;
	left: 518px;
    top: 11px;
	background: url('../img/evraziya.png');
	opacity:0;

}
.map3:hover{
	opacity: 1;
}
.map3-hover:hover,  i-3:hover > .map3-hover  {
	opacity: 1;
}

.map4{
	position: absolute;
	width: 249px;
	height: 267px;
	left: 486px;
    top: 238px;
	background: url('../img/afrika.png');
	opacity:0;
}
.map4:hover{
opacity: 1;
}
.map4-hover:hover,  i-4:hover > .map4-hover  {
	opacity: 1;
}
.map5{
	position: absolute;
	width: 168px;
	height: 259px;
	left: 288px;
    top: 326px;
	background: url('../img/south-america.png');
	opacity:0;
}

.map5:hover{

opacity: 1;
}
.map5-hover:hover,  i-5:hover > .map5-hover  {
	opacity: 1;
}

.map6{
	position: absolute;
	width: 224px;
	height: 144px;
	left: 906px;
    top: 402px;
	background: url('../img/australia.png');
	opacity:0;
}
.map6:hover{
	opacity: 1;
}
.map6-hover:hover,  i-6:hover > .map6-hover  {
	opacity: 1;
}

.vedun{
background: url('../img/vedun-1.png');
}

.question{
width: 855px;
    height: 572px;
    position: relative;
    margin: 2% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: url('../img/fon-59.png');
}



.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
 right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 17, 41, 0.83);
    z-index: 99999;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    display: none;
    pointer-events: none;
}

.modalDialog:target {
display: block;
pointer-events: auto;
}


.modalDialog > div {
    width: 855px;
    height: 572px;
    position: relative;
    margin: 2% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: url('../img/fon-59.png');
}

.close {
    background: #760e11;
    color: #fbc950;
    line-height: 25px;
    position: absolute;
    right: 42px;
    text-align: center;
    top: 34px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}


.close:hover { background: #f51b2f; }

.text{
    width: 350px;
    float: left;
    padding: 5px;
    background: rgba(248, 218, 92, 0.52);
    margin-top: 72px;
}

.novel{
    width: 639px;
    padding: 5px;
    background: rgba(248, 218, 92, 0.7);
    margin: 0 auto;
	position: relative;
    margin-top: 10%;
}

.book{
	width: 38%;
    margin: 7% 0% 0% 11%;
    float: left;
}

.element{
    float: left;
    
}

.bo{
	color: #400606;
    font-size: 17px;
	margin-top: 0px;
}

.annotate{ 
    color: #400606;
    line-height: 16px;
    text-indent: 25px;
    font-size: 14px;
	font-family: sans-serif;
}
.line{
	border: 0;
    border-top: 1px solid #400606;
    width: 353px;
    margin: 0px;
}
.qwest{
position: absolute;
transition: all .2s ease-in-out;
}
.qwest:hover{
animation:rotate 6s linear reverse infinite;
-webkit-animation:rotate 6s linear reverse infinite;
}

@keyframes rotate { 25% { transform:rotate(-20deg); } 50% { transform:rotate(20deg); } 25% { transform:rotate(-20deg); } }
@-webkit-keyframes rotate { 25% { -webkit-transform:rotate(-20deg); } 50% { -webkit-transform:rotate(20deg); } 25% { -webkit-transform:rotate(-20deg); } }

.picto{
 position: absolute;
 transition: all .2s ease-in-out;

}
.picto:hover{
	transform: rotate(-10grad);

}

.home{
	background: url('../img/home.png');
    width: 300px;
    height: 90px;
	    margin-left: 203px;
    margin-top: -136px;
    position: relative;
}

.answer{
background: url('../img/answer.png');
width: 600px;
max-height: 400px;
margin: 0 auto;
padding: 267px 0 41px 0;
}

.type{
    background: #d9642f;
    color: #fff;
    border: 1px solid #992517;
    padding: 5px 10px;
    border-radius: 3px;
    box-shadow: 1px 1px 5px #681710;
}
.line-answer{
	border: 0;
	border-top: 1px solid #400606;
    margin: 0px;
}
.compass{
position: absolute;
    }
.compass:hover {
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }