hsstaff

/*********************




MADE BY AMERICAN QUEEN




**************************/

@font-face {
    font-family: "valentine";
    src: url(https://dl.dropbox.com/s/t6y3lb6n6jhjtma/valentine.ttf);
    format("truetype");
}

#function .base {
  width: 540px;
  height: 200px;
  border: 1px solid #000;
  padding: 5px;
}
#function .image {
  width: 540px;
  height: 200px;
  background: url(https://66.media.tumblr.com/7acb675440890a59b7a8aa2509cf742d/tumblr_pn9c246T3W1tqyqc7_540.gif) center/cover;
  transition: all .5s ease-in-out;
}
#function .name {
font-family: valentine;
  color: #fff;
  font-size: 40px;
  text-transform: lowercase;
  padding-top: 15%;
  transtion: all .5s ease-in-out;
  position: relative;
  top: -103%;
  left: 0%;
  transform: translate(-0%, -0%);
  isolation: isolate;
  transition: all .5s ease-in-out;
}
#function .small {
  font: 10px Arial, sans-serif;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  margin-top: 4px;
  position: relative;
  top: -83%;
  left: 50%;
  transform: translate(-50%, -50%);
  isolation: isolate;
}
#function .color  {
  width: 540px;
  height: 200px;
  mix-blend-mode: multiply;
  background-clip: border-box;

}
#function .base:hover .image {
  opacity: .8;
}
#function .image:hover .small {
  opacity: .0;
}
#function .image:hover .name {
  margin-top: -550px;
}
#function .info {
  width: 530px;
  height: 190px;
  background-color: #fff;
  overflow: hidden;
  position: relative;
  margin-top: -635px;  transition: all .5s ease-in-out;
  z-index: 10px;
}
#function .base:hover .info {
  margin-top: -135px;
   }
#function .icon {
  width: 151px;
  height: 60px;
  background: url(https://66.media.tumblr.com/1fdb600affba361f1a8cafa5dd17a789/tumblr_o1vzahQ7if1rhn31io1_400.gif) center/cover;
border: 5px solid #00000047;

  margin-top: 3px;
  margin-left: -0.5px
}
#function .data {
  width: 152px;
  height: 42px;
  background-color: #000;
  outline: 1px solid #fff;
  outline-offset: -5px;
  margin-left: -tpx;
  margin-top: 3px;
  padding: 5px;
}
#function .adm {
  font: 19px Arial, sans-serif;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  padding-top: 5%;
  margin-left: -10px;
}
#function .text {
  width: 330px;
  height: 163px;
    outline: 1px solid #000;
  outline-offset: 5px;
  margin-left: 10px;
}
#function .work {
  width: 310px;
  height: 143px;
  overflow: auto;
  padding: 10px;
  text-align: justify;
  font: 13px Arial,  sans-serif;
  color: #000000;
  line-height: 130%;
  text-transform: none;
}
.work::-webkit-scrollbar {
  width: 1px;
  color: transparent;
}

.work::-webkit-scrollbar-thumb {
  width: 1px;
  color: transparent;
}


.work::-webkit-scrollbar-track {
  width: 1px;
  color: transparent;
}
#function::after {
  content: "American Queen for seoul light";
  padding: 5px;
  position: relative;
   bottom: -10px;
  float: bottom;
  left: 30px;
  text-align: center;
  font: 10px 'Montserrat', sans-serif;
  text-transform: uppercase;
  color: #8e8e8e;
  opacity: .5;
}