@import url('https://fonts.googleapis.com/css?family=Gugi');


body{
  width: 100%;
}



#map{
  max-height: 400px;
}

/* bgground img */
#back-image{
  background: url('./img/backgrnd.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  /*padding-left: 150px;*/
  opacity: 0.85;
}

.design {
  color: orange;
}

/* for intro */
.intro{
  text-align: center;
  font-family: Gugi;
  color: #427874;
}

.intro:hover{
  color: yellow;
  -moz-transform:scale(1.18);
  transform: scale(1.18);
  }

/* intro-bgrnd */

.backgrnd{
  text-align: center;
  width: 800px;
  padding: 35px;
  background-color: #000;
  opacity: 0.65;
  margin-top: -0.6em;
  margin-left: 5.9em;
  margin-bottom: 50px;

}



/* for wordart */
@media screen and (min-width: 961px) {
  .wordart{
  width: 400px;
  height: 440px;
  cursor: pointer;
  }
}

@media screen and (max-width: 960px) {
  .wordart{
    margin-bottom: 0.4em;
  }
}

/* for zooming img */
img{
  filter: grayscale(80%);
}

img:hover {
  filter: contrast(100%);
  -moz-transform: scale(1.28);
  -webkit-transform: scale(1.28);
   transform: scale(1.28);
   box-shadow: -1em 0 0.4em orange;
   cursor: pointer;
}

/* text-fade */
@import url(https://fonts.googleapis.com/css?family=Open+Sans);


#name-bk {
  color: orange;
  background: linear-gradient(#d36890, #429290);
  opacity: 0.95;
}

.area {
	width: 100%;
  text-align: center;
  font-size: 3.2em;
  letter-spacing: -3.2px;
  font-weight: 680;
  text-transform: uppercase;
  animation: blur .95s ease-out infinite;
  text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff;
}

@keyframes blur {
  from {
    text-shadow:0px 0px 10px #fff,
      0px 0px 10px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #7B96B8,
      0px 0px 150px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px -10px 100px #7B96B8,
      0px -10px 100px #7B96B8;
  }
}

.lead:hover{
  color: #aef;
  background-color: #000;
  font-weight: normal;
  cursor: pointer;

}

#social{
  filter: grayscale(70%);
  text-align: center;
  text-shadow: 1px 1px 2px #ccc;
  margin: 0.3em;
  }

  #social:hover{
    background-color: #efb;
  }