/* Layout */

#button-area svg {
	position:absolute;
	top:0;
	left:0;
	z-index:-100;
}

.social_list {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 50px 43%;
  max-width: 21rem;
  min-height:6rem;
  z-index: 5;
  width:14%;
}
.social_list li {
  flex: 1 1 0;
  text-align: center;
}




/* 以下タブレット・スマホ */
@media (max-width: 699px) {

.social_list {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 50px 30%;
  max-width: 21rem;
  min-height:6rem;
  z-index: 5;
  width:40%;
}

}



/* The social links */

[class*="social_lnk"] {
  position: relative;
  padding: 2px;
  border-radius: 50%;
  display: inline-block;
  text-decoration: none;
  background-color: #3B2D4A;
  outline: 0 solid;
  width: 3rem;
  height: 3rem;
  transition: all .3s ease-out;
  box-shadow: 0 .25em .25em rgba(0,0,0,.3);
  background-repeat: no-repeat;
  animation: social-hover-off .3s ease-out forwards;

/* Apply Lucas Bebber's goo SVG filter */
  -webkit-filter:url('#goo');
  filter:url('#goo');
}

[class*="social_lnk"]:hover,
[class*="social_lnk"]:focus {
  background-color: currentColor;
  outline: 0 solid;
  box-shadow: 0 .5em .5em rgba(0,0,0,.0);
  animation: social-hover-on .8s ease-out forwards;
  transition: all .3s ease-out;
}
@keyframes social-hover-off {
  0% {width: 3em; height:3em}
  70% {width: 2.25em; height:3.5em}
  100% {width: 3em; height:3em}
}

@keyframes social-hover-on {
  0% {width: 3em; height:3em}
  30% {width: 2.25em; height:3.5em}
  100% {width: 3em; height:3em}
}
[class*="social_lnk"]:active {
  box-shadow: none;
}
[class*="social_lnk"].-clicked {
  animation: pressed-social .3s ease-out;
}
@keyframes pressed-social {
  0% {transform: scale(1.1);}
  50% {transform: scale(.8); background-color:#503660; box-shadow: none;}
  100% {transform: scale(1.2);}
}
[class*="social_lnk"] span {
  display:none;
}
[class*="social_lnk"] i {
  display:block;
  width: 100%;
  height: 6rem;
  z-index: 5;
  background-color: transparent;
}

/* Individual social icons (works in IE) */

.social_lnk-twitter {
  color: #37A7DF;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M15.2 31.44c2.4 0 4.47-.74 6.1-2.08-2.22 0-4-1.5-4.6-3.43.3.15.6.15.9.15.44 0 .88 0 1.33-.15-2.23-.44-3.87-2.38-3.87-4.76.75.3 1.5.6 2.23.6-1.36-.9-2.25-2.38-2.25-4.02 0-.9.15-1.8.6-2.53 2.38 2.98 6.1 4.9 10.12 5.06-.15-.3-.15-.6-.15-1.04 0-2.68 2.23-4.9 4.9-4.9 1.35 0 2.7.58 3.58 1.47 1.2-.27 2.24-.57 3.14-1.17-.3 1.05-1.05 2.1-2.1 2.68 1.05-.14 1.95-.3 2.84-.73-.6 1.04-1.5 1.78-2.53 2.53v.58c0 6.55-4.9 14-14 14-2.67 0-5.2-.9-7.43-2.24h1.2z'/%3E%3C/svg%3E");
}
.social_lnk-twitter::after {letter-spacing:.07em;} /* Needs to be a little wider */
.social_lnk-twitter::after,
.social_lnk-twitter::before {
  background-color: #37A7DF;
  box-shadow: 0 .5em .5em #37A7DF;
}
.social_lnk-linkedin {
  color: #007BB5;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M18.37 19.97V36h-5V19.96h5zm7.96 2.2c.66-1.27 2.3-2.6 4.7-2.6 5.05 0 5.98 3.32 5.98 7.64V36h-4.96v-7.8c0-1.86-.03-4.25-2.58-4.25-2.6 0-3 2.03-3 4.12V36H21.5V19.96h4.76v2.2h.07zM15.88 12c1.6 0 2.88 1.3 2.88 2.9 0 1.6-1.3 2.88-2.88 2.88-1.6 0-2.9-1.3-2.9-2.88 0-1.6 1.3-2.9 2.9-2.9z'/%3E%3C/svg%3E");
}
.social_lnk-linkedin::after,
.social_lnk-linkedin::before {
  background-color: #007BB5;
  box-shadow: 0 .5em .5em #007BB5;
}
.social_lnk-codepen {
  color: #000;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M24.6 8.5c-.3-.4-.8-.5-1.6 0L8.7 18c-.4 0-.7.4-.7 1.2v9.5c0 .7.3 1 .7 1.3L23 39.6c.7.3 1.3.3 1.6 0L39.3 30c.5-.3.7-.8.7-1.3v-9.5c0-1-.7-1.2-.7-1.2L24.6 8.5zm-2 27.6L12 29l4.7-3.2 6 4.2v6zm2.7 0v-6l6-4 4.7 3-10.5 7zM24 27l-4.8-3 4.8-3.2 4.8 3.2-4.8 3zm-13.3-5.3l3.7 2.3-3.7 2.2v-4.5zm26.6 4.5L33.6 24l3.7-2.3v4.5zm-12-14.4L36 19.2l-4.7 3.2-6-4v-6.6zm-2.6 0v6.4l-6 4.2-4.8-3.2L22.2 12v-.2z'/%3E%3C/svg%3E");
}
.social_lnk-codepen::after,
.social_lnk-codepen::before {
  background-color: #000;
  box-shadow: 0 .5em .5em #000;
}
.social_lnk-googleplus {
  color: #dd4b39;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M8.04 23.47c.1-5.5 5.16-10.33 10.66-10.15 2.64-.12 5.12 1.03 7.14 2.64-.86.98-1.75 1.92-2.7 2.8-2.43-1.67-5.9-2.15-8.32-.2-3.47 2.4-3.63 8.06-.3 10.65 3.26 3 9.4 1.5 10.3-3-2.03 0-4.07 0-6.1-.03-.02-1.2-.02-2.4-.02-3.63h10.22c.2 2.87-.17 5.9-1.93 8.27-2.7 3.74-8 4.84-12.2 3.24S7.62 28 8 23.5zm25.82-4.1h3.04c0 1 0 2.04.02 3.06 1.02 0 2.04 0 3.05.02v3.04h-3.05c0 1 0 2-.02 3h-3.04c0-1 0-2.03-.02-3.04-1.02 0-2.04 0-3.05-.03V22.4l3-.02v-3.03z'/%3E%3C/svg%3E");
}
.social_lnk-googleplus::after,
.social_lnk-googleplus::before {
  background-color: #dd4b39;
  box-shadow: 0 .5em .5em #dd4b39;
}
.social_lnk-facebook {
  color: #3C5193;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M19.6 15.4c0-1.4 0-3.6 1-5C21.8 9 23.2 8 25.8 8c4.2 0 6 .6 6 .6l-.8 4.8s-1.3-.4-2.5-.4c-1.3 0-2.5.4-2.5 1.8v3.8h5.2l-.4 4.8h-5V40h-6.2V23.4h-3.4v-4.8h3.4v-3.2z'/%3E%3C/svg%3E");
}
.social_lnk-facebook::after,
.social_lnk-facebook::before {
  background-color: #3C5193;
  box-shadow: 0 .5em .5em #3C5193;
}





/* Part 2 - Animated tooltips - Based on: https://codepen.io/devy_pl/pen/QEAgdA */

[class*="social_lnk"]::after {
  display: block;
  position: absolute;
  content: attr(aria-label);
  color: white;
  border-radius: 50%;
  padding:.7em .7em 0em;

  white-space: nowrap;
  pointer-events: none;

  top: 110%;
  left: 50%;
  opacity: 0;
  transform: translate(-50%, -100%) scale(0.6);

  font-size: .8em;
  animation: hovered-social-out .25s ease-out forwards;
  transition: .3s ease-out;
}

[class*="social_lnk"]:hover::after,
[class*="social_lnk"]:focus::after {
  border-radius: 2em 2em 1em 1em;
  animation: hovered-social-in .5s ease-out .15s forwards;
}
@keyframes hovered-social-in {
  0% {transform: translate(-50%, -100%) scale(.6); opacity: .5;}
  100% {transform: translate(-50%, 30%) scale(1); opacity: 1;}
}
@keyframes hovered-social-out {
  0% {transform: translate(-50%, 10%) scale(1); opacity: 1;}
  100% {transform: translate(-50%, -100%) scale(.6); opacity: 0;}
}

/* Attempt at using ::before to replace / enhance gooeyness */

[class*="social_lnk"]::before {
  display: block;
  position: absolute;
  z-index: -1;
  transition: .3s ease-out;

  xcontent: attr(aria-label);
  content: "";
  
  border-radius: 50%;
  width: 2rem;
  height: 0rem;
  top: 100%;
  left: 50%;
  opacity: 0;
  transform: translate(-50%, -100%) scale(0.6);

  animation: hovered-social-before-out .3s ease-out 0s forwards;
}

[class*="social_lnk"]:hover::before,
[class*="social_lnk"]:focus::before {
  animation: hovered-social-before-in .3s ease-out .15s forwards;
}
@keyframes hovered-social-before-in {
  0% {transform: translate(-50%, -100%) scale(.6); opacity: .5;}
  100% {transform: translate(-50%, 30%) scale(1); opacity: 1; width: 110%; height: 1.5rem;}
}
@keyframes hovered-social-before-out {
  0% {transform: translate(-50%, 10%) scale(1); opacity: 1;}
  100% {transform: translate(-50%, -100%) scale(.6); opacity: 0;}
}