html,body{
	margin:0;
	padding: 0;
	font-family: "Lato","Helvetica Neue","Arial", sans-serif;
	font-weight: 100;
	font-size: 32px;
	line-height: 1.4em;
	color: #333;
	background-color: #ededed;
}
.logo{
	background-size: 1200% 1200%;
	display: block;
	width: 100vw;
	height: 100%;

	text-align: center;
	padding-top: 20vh;
}
.logo p{
	letter-spacing: 1px;
}
a{
	color: blue;
	position: relative;
}
a:after{
	content: '';
	transition: width 0.3s ease;
	width: 0;
	height: 1px;
	background-color: blue;
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	transform-origin: center;
}
a:hover{
	color: blue;
	text-decoration: none;
}
a:hover:after{
	width: 100%;
}
.heavy{
	font-weight: 400;
}
svg {
  position: fixed;
  pointer-events: none;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  max-width: 480px;
  max-height: 340px;
  z-index: 0;
}

.path {
  stroke-dashoffset: 1100;
  stroke-dasharray: 1000;
}

.frame {
  height: 3000px;
}

.path {
  -webkit-transition: fill-opacity 0.7s ease;
  transition: fill-opacity 0.7s ease;

}

.cls-1 {
  stroke: #2ff4dd;
  fill: url(#linear-gradient-1);
  fill-opacity: 0;
}

.cls-2 {
  stroke: #254df4;
  fill: url(#linear-gradient-2);
  fill-opacity: 0;
}

.cls-3 {
  stroke: #0f9eed;
  fill: url(#linear-gradient-3);
  fill-opacity: 0;
}

#logo.full #linear-gradient-1 stop[offset="0"] {
  stop-color: #36ffd8;
}
#logo.full #linear-gradient-1 stop[offset="1"] {
  stop-color: #00a7ff;
}
#logo.full #linear-gradient-2 stop[offset="0"] {
  stop-color: #00a7ff;
}
#logo.full #linear-gradient-2 stop[offset="1"] {
  stop-color: #254df4;
}
#logo.full #linear-gradient-3 stop[offset="0"] {
  stop-color: #2700ff;
}
#logo.full #linear-gradient-3 stop[offset="1"] {
  stop-color: #00ffe2;
}
#logo.full .cls-1 {
  fill: url(#linear-gradient-1);
  fill-opacity: 1;
}
#logo.full .cls-2 {
  fill: url(#linear-gradient-2);
  fill-opacity: 1;
}
#logo.full .cls-3 {
  fill: url(#linear-gradient-3);
  fill-opacity: 1;
}

stop {
  -webkit-transition: 3s ease;
  transition: 3s ease;
}

#logo {
  transition: 0.7s ease-in;
}

#logo.full.spin {
  transform: rotate(720deg) scale(0.2);
}
.scroll-more {
	display: inline-block;
	height: 36px;
	color: #333;
	text-decoration: none;
	font-size: 14px;
	-webkit-backface-visibility: hidden;
	margin: -18px 0 65px;
}
.scroll-more:hover,
.scroll-more:focus {
	color: #333;
	text-decoration: none;
}
.scroll-more span {
	vertical-align: middle;
	opacity: .5;
	transition: opacity 0.3s;
}
.scroll-more:hover span {
	opacity: 1;
}
.scroll-more .icon {
	position: relative;
	display: inline-block;
	width: 30px;
	height: 48px;
	vertical-align: middle;
}
.scroll-more .icon:before {
	display: block;
	width: 30px;
	height: 48px;
	content: "";
	border: 1px solid #777;
	border-radius: 22px;
}
.scroll-more .icon:after {
	position: absolute;
	display: block;
	top: 10px;
	left: 14px;
	width: 2px;
	height: 5px;
	content: "";
	background-color: #555;
    animation: scroll 1.2s infinite;
}

@keyframes scroll {
    0% { opacity: .8; transform: translateY(0); height: 3px }
   60% { opacity: .6; height: 5px;  }
  100% { opacity: 0; transform: translateY(8px); height: 3px }
}