body {

background: #000;

}


/* Visible image map container */
#m-east {
position: relative;
width: 1168px;
height: 761px;
background: #000 url(map.png) no-repeat;
margin: 0 auto;
padding: 0;
}

/* List styling */
#m-east li {
display: block;
position: absolute;
list-style: none;
margin: 0;
padding: 0;
}

/* Link styling */
#m-east a {
display: block;
text-indent: -9999px;
text-decoration: none;
outline: none;
cursor: url();
}

/* Country position on the image (z-index goes here) */
#rethem{left: 328px; top: 272px; z-index: 10;}
#tharda {left: 430px; top: 311px; z-index: 30;}
#kanday {left: 363px; top: 406px;}
#evael {left: 579px; top: 323px;}
#kaldor {left: 690px; top: 242px; z-index: 40;}
#orbaal {left: 516px; top: 96px; }
#azadmere {left: 789px; top: 157px;}
#chibisa {left: 755px; top: 362px; z-index: 50;}
#meldern {left: 821px; top: 458px;}
#wilds {left: 405px; top: 181px;}
#beasts {left: 626px; top: 531px;}
#religions {left: 766px; top: 511px;}
#kethira {left: 973px; top: 433px;}
#hworld {left: 816px; top: 53px;}
#hmaster {left: 876px; top: 115px;}
#hquest{left: 921px; top: 212px;}
#ivinia{left: 955px; top: 11px;}
#help{left: 982px; top: 587px;}
#misc{left: 195px; top: 582px;}
#freemaps{left: 874px; top: 292px;}
#inn{left: 290px; top: 37px;}


#freemaps {
background: url(map.png) -920px -1167px no-repeat;
animation: bobble 2s infinite;
}
@keyframes bobble {
    0% {
        transform: translate3d(50px, 40px, 0px);
        animation-timing-function: ease-in;
    }
    50% {
        transform: translate3d(50px, 50px, 0px);
        animation-timing-function: ease-out;
    }
    100% {
        transform: translate3d(50px, 40px, 0px);
    }
}


/* Country width & height */
#rethem a {width: 116px; height: 191px;}
#tharda a {width: 156px; height: 187px;}
#kanday a {width: 134px; height: 187px;}
#evael a {width: 128px; height: 219px;}
#kaldor a {width: 118px; height: 193px;}
#orbaal a {width: 260px; height: 163px;}
#azadmere a {width: 89px; height: 163px;}
#chibisa a {width: 85px; height: 146px;}
#meldern a {width: 130px; height: 211px;}
#wilds a {width: 124px; height: 138px;}
#beasts a {width: 121px; height: 94px;}
#religions a {width: 77px; height: 118px;}
#kethira a {width: 70px; height: 70px;}
#hworld a {width: 174px; height: 93px;}
#hmaster a {width: 176px; height: 96px;}
#hquest a {width: 159px; height: 86px;}
#ivinia a {width: 140px; height: 109px;}
#help a {width: 71px; height: 73px;}
#misc a {width: 222px; height: 151px;}
#freemaps a {width: 148px; height: 83px;}
#inn a {width: 126px; height: 110px;}


/* Country hover image position */
#rethem a:hover {background: url(map.png) -96px -773px no-repeat;}
#tharda a:hover {background: url(map.png) -246px -780px no-repeat; }
#kanday a:hover {background: url(map.png) -421px -777px no-repeat;}
#evael a:hover {background: url(map.png) -571px -781px no-repeat;}
#kaldor a:hover {background: url(map.png) -743px -775px no-repeat;}
#orbaal a:hover {background: url(map.png) -879px -804px no-repeat;}
#azadmere a:hover {background: url(map.png) -110px -992px no-repeat;}
#chibisa a:hover {background: url(map.png) -264px -1001px no-repeat;}
#meldern a:hover {background: url(map.png) -408px -1003px no-repeat;}
#wilds a:hover {background: url(map.png) -253px -1187px no-repeat;}
#beasts a:hover {background: url(map.png) -767px -1020px no-repeat;}
#religions a:hover {background: url(map.png) -939px -995px no-repeat;}
#kethira a:hover {background: url(map.png) -109px -1215px no-repeat;}
#hworld a:hover {background: url(map.png) -402px -1369px no-repeat;}
#hmaster a:hover {background: url(map.png) -588px -1363px no-repeat;}
#hquest a:hover {background: url(map.png) -734px -1166px no-repeat;}
#ivinia a:hover {background: url(map.png) -976px -1317px no-repeat;}
#help a:hover {background: url(map.png) -454px -1251px no-repeat;}
#misc a:hover {background: url(map.png) -100px -1344px no-repeat;}
#freemaps a:hover {background: url(map.png) -920px -1167px no-repeat;}
#inn a:hover {background: url(map.png) -800px -1347px no-repeat;}


.box {
  width: 40%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}

.button {
  font-size: 1em;
  padding: 10px;
  color: #fff;
  border: 2px solid #06D85F;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  background: #06D85F;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  z-index: 80;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
   z-index: 90;
   text-indent: 0px;
}
.popup .close:hover {
  color: #06D85F;
}

.popup  a {
  color: #009827;
   display: block;
    outline: medium none;
    text-decoration: none;
    text-indent: 0px !important;
	font-weight: bold;
}


.popup .content {
  max-height: 30%;
  overflow: auto;
}

@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}

#search {
    margin: 0 auto;
    width: 470px;
}


/* Center the loader */
#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

#myDiv {
  display: none;
  text-align: center;
}