/* explore perioland */



#perios-six {

  position: relative;

}



@keyframes dance {

  0% {

    transform: scale(1.25, 1.25);

  }

  25% {

    transform: scale(1, 1);

  }

  50% {

    transform: scale(1.25, 1.25)

  }

  75% {

    transform: scale(1, 1);



  }

  100% {

    transform: scale(1.25, 1.25);

  }

}



@keyframes talk {

  from {

    left: 0px;

  }

  to {

    left: 60px;

    opacity: 1;

  }

}



#hydi {

  position: relative;

  width: 50px;

  z-index: 98;

  animation: dance 3s infinite;

  cursor: pointer;

}



#hydi-div {

  position: relative;

  left: 40px;

  top: 10px;

}



#hydi-quote {

  position: relative;

  background-color: rgba(240, 240, 240, 0.75);

  box-shadow: 4px 4px 4px rgba(53, 53, 53, 0.75);

  border-radius: 4px;

  color: #353535;

  z-index: 99;

  padding: 4px;

}





#ruby {

  position: relative;

  width: 35px;

  z-index: 98;

  animation: dance 4s infinite;

  cursor: pointer;

}



#ruby-div {

  position: relative;

  top: 140px;

}



#ruby-quote {

  position: relative;

  background-color: rgba(240, 240, 240, 0.75);

  box-shadow: 4px 4px 4px rgba(53, 53, 53, 0.75);

  border-radius: 4px;

  padding: 4px;

  z-index: 99;

}



#zirc {

  position: relative;

  width: 55px;

  z-index: 98;

  animation: dance 2s infinite;

  cursor: pointer;

}



#zirc-div {

  position: relative;

  top: 350px;

  left: -20px;

}



#zirc-quote {

  position: relative;

  background-color: rgba(240, 240, 240, 0.75);

  box-shadow: 4px 4px 4px rgba(53, 53, 53, 0.75);

  border-radius: 4px;

  padding: 4px;

  z-index: 99;

}



#nic {

  position: relative;

  width: 55px;

  z-index: 98;

  animation: dance 5s infinite;

  cursor: pointer;

}



#nic-div {

  position: relative;

  top: 250px;

  left: 10px;

}



#nic-quote {

  position: relative;

  background-color: rgba(240, 240, 240, 0.75);

  box-shadow: 4px 4px 4px rgba(53, 53, 53, 0.75);

  border-radius: 4px;

  padding: 4px;

  z-index: 99;

}



#carbo {

  position: relative;

  width: 55px;

  z-index: 98;

  animation: dance 3.5s infinite;

  cursor: pointer;

}



#carbo-div {

  position: relative;

  top: 50px;

}



#carbo-quote {

  position: relative;

  background-color: rgba(240, 240, 240, 0.75);

  box-shadow: 4px 4px 4px rgba(53, 53, 53, 0.75);

  border-radius: 4px;

  padding: 4px;

  z-index: 99;

}



#helen {

  position: relative;

  width: 55px;

  z-index: 98;

  animation: dance 4.5s infinite;

  cursor: pointer;

}



#helen-div {

  position: relative;

  top: 100px;

}



#helen-quote {

  position: relative;

  background-color: rgba(240, 240, 240, 0.75);

  box-shadow: 4px 4px 4px rgba(53, 53, 53, 0.75);

  border-radius: 4px;

  padding: 4px;

  z-index: 99;

}

/* Perios Maps CSS */



/* Clan Map */

.maps-content {

  text-align: center;

  background-color: rgba(240, 240, 240, 0.75);

  box-shadow: 4px 4px rgba(53, 53, 53, 0.75);

  border-radius: 4px;

  padding: 5px;

}



.area-maps {

  position: relative;

  display: block;

  margin: 0 auto;

  width: 75%;

}



#maps-row {

  position: relative;

  top: 100px;

}



.maps-text {

  font-size: 16px;

  text-indent: 30px;

  text-align: left;

}



#alkali {

  position: relative;

  left: -125px;

  top: -75px;

}



#alkalina {

  position: relative;

  top: 60px;

  left: -140px;

}



#boral {

  position: relative;

  top: 40px;

  left: 75px;

}



#metran {

  position: relative;

  top: 120px;

  left: -60px;

}



#pinig {

  position: relative;

  top: -50px;

  left: 100px;

}



#casil {

  position: relative;

  top: 100px;

  left: 100px;

}



#chalco {

  position: relative;

  top: 65px;

  left: 50px;

}



#halogen {

  position: relative;

  top: -60px;

}



#aerogen {

  position: relative;

  top: 65px;

  left: 80px;

}



/* region */

#alkisland {

  position: relative;

  left: -125px;

  top: -50px;

}



#alkcoast {

  position: relative;

  left: -140px;

  top: 100px;

}



#metranplains {

  position: relative;

  top: 200px;

  left: -60px;

}



#airyplat {

  position: relative;

  top: -25px;

  left: 100px;

}



#vapor {

  position: relative;

  top: -40px;

  left: 125px;

}



#highlands {

  position: relative;

  top: 95px;

  left: 80px;

}



#actlant {

  position: relative;

  left: 400px;

  top: 50px;

}



.clan-title {

  position: relative;

  transition: 1s;

  width: 125px;

  height: auto;

}



.clan-titles {

  position: relative;

  transition: 1s;

  width: 175px;

  height: auto;

}



.clan-title:hover {

  width: 150px;

  cursor: pointer;

}



.clan-titles:hover {

  width: 200px;

  cursor: pointer;

}



#clan-caption {

  color: rgb(240, 240, 240);

  font-size: 16px;

  text-indent: 30px;

}



#lactern-row {

  position: relative;

  top: 300px;

}



#actin {

  position: relative;

  left: 100px;

}



#lantern {

  position: relative;

  left: 100px;

}



.modal-text {

  color: rgb(240, 240, 240);

  font-size: 16px;

  text-decoration: underline;

  position: relative;

  display: block;

  margin: 0 auto;

}



#clan-links-div {

  position: relative;

  left: 20px;

}

#newest-news {
    text-align: center;
}



.news-column-contents h3 {
    color: #353535;
}


.news-column-contents {
    background-color: rgba(240, 240, 240, 0.85);
    box-shadow: 4px 4px 4px rgba(53, 53, 53, 0.75);
    padding: 5px;
    position: relative;
    border-radius: 4px;
}



    .news-column-contents h3 a {
        color: blue;
        text-decoration: none;
    }