/**
 * Animations
 */

.fromTopIn
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: translate(0,0);
	opacity: 1.0;
}

.fromTopOut
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: translate(0,-10px);
	opacity: 0.0;
}

.fromBottomIn
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: translate(0,0);
	opacity: 1.0;
}

.fromBottomOut
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: translate(0,10px);
	opacity: 0.0;
}

.fromLeftIn
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: translate(0,0);
	opacity: 1.0;
}

.fromLeftOut
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: translate(-10px,0);
	opacity: 0.0;
}

.fromRightIn
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: translate(0,0);
	opacity: 1.0;
}

.fromRightOut
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: translate(10px, 0);
	opacity: 0.0;
}

.scaleUpIn
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: scale(1.0,1.0);
	opacity: 1.0;
}

.scaleUpOut
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: scale(1.3,1.3);
	opacity: 0.0;
}

.scaleDownIn
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: scale(1.0,1.0);
	opacity: 1.0;
}

.scaleDownOut
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: scale(0.7,0.7);
	opacity: 0.0;
}


.external-link a, .external-link button {
  color: #333333;
  padding: 0.7em calc(0.7em * 1.2);
  display: inline-block;
  border: 3px solid transparent;
  position: relative;
  cursor: pointer;
  letter-spacing: 0.07em;
}
.external-link a .text, .external-link button .text  {
font-family:Raleway, sans-serif;
  transform: translate3d(0, 0.7em, 0);
  display: block;
  transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1) 0.4s;
}
.external-link a:after, .external-link button:after {
  position: absolute;
  content: '';
  bottom: -3px;
  left: calc(0.7em * 1.2);
  right: calc(0.7em * 1.2);
  height: 3px;
  background: #8CBF43;
  transition: transform 0.8s cubic-bezier(1, 0, 0.37, 1) 0.2s, right 0.2s cubic-bezier(0.04, 0.48, 0, 1) 0.6s, left 0.4s cubic-bezier(0.04, 0.48, 0, 1) 0.6s;
  transform-origin: left;
}
.external-link .line {
  position: absolute;
  background: #8CBF43;
}
.external-link .line.-right, .external-link .line.-left {
  width: 3px;
  bottom: -3px;
  top: -3px;
  transform: scale3d(1, 0, 1);
}
.external-link .line.-top, .external-link .line.-bottom {
  height: 3px;
  left: -3px;
  right: -3px;
  transform: scale3d(0, 1, 1);
}
.external-link .line.-right {
  right: -3px;
  transition: transform 0.1s cubic-bezier(1, 0, 0.65, 1.01) 0.23s;
  transform-origin: top;
}
.external-link .line.-top {
  top: -3px;
  transition: transform 0.08s linear 0.43s;
  transform-origin: left;
}
.external-link .line.-left {
  left: -3px;
  transition: transform 0.08s linear 0.51s;
  transform-origin: bottom;
}
.external-link .line.-bottom {
  bottom: -3px;
  transition: transform 0.3s cubic-bezier(1, 0, 0.65, 1.01);
  transform-origin: right;
}
.external-link a:hover .text,
.external-link a:active .text,
.external-link button:hover .text,
.external-link button:active .text  {
  transform: translate3d(0, 0, 0);
  transition: transform 0.6s cubic-bezier(0.2, 0, 0, 1) 0.4s;
}
.external-link a:hover:after,
.external-link a:active:after,
.external-link button:hover:after,
.external-link button:active:after {
  transform: scale3d(0, 1, 1);
  right: -3px;
  left: -3px;
  transform-origin: right;
  transition: transform 0.2s cubic-bezier(1, 0, 0.65, 1.01) 0.17s, right 0.2s cubic-bezier(1, 0, 0.65, 1.01), left 0s 0.3s;
}
.external-link a:hover .line,
.external-link a:active .line,
.external-link button:hover .line,
.external-link button:active .line {
  transform: scale3d(1, 1, 1);
}
.external-link a:hover .line.-right,
.external-link a:active .line.-right,
.external-link button:hover .line.-right,
.external-link button:active .line.-right {
  transition: transform 0.1s cubic-bezier(1, 0, 0.65, 1.01) 0.2s;
  transform-origin: bottom;
}
.external-link a:hover .line.-top,
.external-link a:active .line.-top,
.external-link button:hover .line.-top,
.external-link button:active .line.-top  {
  transition: transform 0.08s linear 0.4s;
  transform-origin: right;
}
.external-link a:hover .line.-left,
.external-link a:active .line.-left,
.external-link button:hover .line.-left,
.external-link button:active .line.-left {
  transition: transform 0.08s linear 0.48s;
  transform-origin: top;
}
.external-link a:hover .line.-bottom,
.external-link a:active .line.-bottom,
.external-link button:hover .line.-bottom,
.external-link button:active .line.-bottom {
  transition: transform 0.5s cubic-bezier(0, 0.53, 0.29, 1) 0.56s;
  transform-origin: left;
}