body {
  text-align: center;
}


.logo {
  font-family: "Helvetica", Arial, sans-serif;
  font-size: 0.8em;
  display: inline-block;
  position: relative;
}

.logo-svg {
  width: 45em;
  height: 42em;
  position: relative;
	margin-top: 5.5rem;
}
.logo-svg polygon {
  stroke: #ccc;
  stroke-width: 1;
}
.logo-svg g {
  transform: translateX(0);
  transition: transform 0.1s ease;
}

.logo-svg-green-1 {
  fill: #3fae52;
}
.logo-svg-green-2 {
  fill: #7cc686;
}
.logo-svg-green-3 {
  fill: #2d8d43;
}
.logo-svg-cyan-1 {
  fill: #00bad2;
}
.logo-svg-cyan-2 {
  fill: #0097a7;
}
.logo-svg-cyan-3 {
  fill: #4ac4d7;
}
.logo-svg-cyan-4 {
  fill: #00bad2;
}
.logo-svg-blue-1 {
  fill: #62b3e4;
}
.logo-svg-blue-2 {
  fill: #1b77bd;
}
.logo-svg-blue-3 {
  fill: #62b3e4;
}
.logo-svg-blue-4 {
  fill: #3191cf;
}
.logo-svg-purple-1 {
  fill: #7a3594;
}
.logo-svg-purple-2 {
  fill: #944198;
}
.logo-svg-purple-3 {
  fill: #b06eae;
}
.logo-svg-purple-4 {
  fill: #944198;
}
.logo-svg-pink-1 {
  fill: #e81f64;
}
.logo-svg-pink-2 {
  fill: #c21e5c;
}
.logo-svg-pink-3 {
  fill: #f06392;
}
.logo-svg-pink-4 {
  fill: #e81f64;
}
.logo-svg-pink-5 {
  fill: #c21e5c;
}
.logo-svg-red-1 {
  fill: #ef4438;
}
.logo-svg-red-2 {
  fill: #e57373;
}
.logo-svg-red-3 {
  fill: #d32e2e;
}
.logo-svg-red-4 {
  fill: #ef4438;
}
.logo-svg-red-5 {
  fill: #d32e2e;
}
.logo-svg-orange-1 {
  fill: #f47c20;
}
.logo-svg-orange-2 {
  fill: #f8951f;
}
.logo-svg-orange-3 {
  fill: #f47c20;
}
.logo-svg-orange-4 {
  fill: #fcb452;
}
.logo-svg-yellow-1 {
  fill: #fedc63;
}
.logo-svg-yellow-2 {
  fill: #fecd27;
}
.logo-svg-yellow-3 {
  fill: #faa71c;
}
.logo-svg-asphalt{fill:#34495E}
.logo-svg-bflat{fill:#3498db }


.logo:hover .logo-svg-green-1 {
  transform: rotate(-15deg) translate3d(1.875em, 0em, 0);
}
.logo:hover .logo-svg-green-2 {
  transform: rotate(-10deg) translate3d(-0.625em, -1.875em, 0);
}
.logo:hover .logo-svg-green-3 {
  transform: rotate(14deg) translate3d(1.25em, -6.875em, 0);
}
.logo:hover .logo-svg-cyan-1 {
  transform: rotate(-7deg) translate3d(-5.3125em, -3.125em, 0);
}
.logo:hover .logo-svg-cyan-2 {
  transform: rotate(22deg) translate3d(4.375em, -11.25em, 0);
}
.logo:hover .logo-svg-cyan-3 {
  transform: rotate(12deg) translate3d(-1.25em, -5em, 0);
}
.logo:hover .logo-svg-cyan-4 {
  transform: rotate(-25deg) translate3d(0em, 5em, 0);
}
.logo:hover .logo-svg-blue-1 {
  transform: rotate(7deg) translate3d(-2.1875em, -3.75em, 0);
}
.logo:hover .logo-svg-blue-2 {
  transform: rotate(13deg) translate3d(6.25em, -9.375em, 0);
}
.logo:hover .logo-svg-blue-3 {
  transform: rotate(2deg) translate3d(3.125em, -3.125em, 0);
}
.logo:hover .logo-svg-blue-4 {
  transform: rotate(-10deg) translate3d(3.125em, 3.75em, 0);
}
.logo:hover .logo-svg-purple-1 {
  transform: rotate(5deg) translate3d(-5em, -9.375em, 0);
}
.logo:hover .logo-svg-purple-2 {
  transform: rotate(8deg) translate3d(-1.25em, -7.5em, 0);
}
.logo:hover .logo-svg-purple-3 {
  transform: rotate(-30deg) translate3d(-5em, 7.5em, 0);
}
.logo:hover .logo-svg-purple-4 {
  transform: rotate(20deg) translate3d(9.375em, -5em, 0);
}
.logo:hover .logo-svg-pink-1 {
  transform: rotate(10deg) translate3d(2.5em, -7.5em, 0);
}
.logo:hover .logo-svg-pink-2 {
  transform: rotate(-30deg) translate3d(-7.5em, 0em, 0);
}
.logo:hover .logo-svg-pink-3 {
  transform: rotate(11deg) translate3d(5.625em, 0em, 0);
}
.logo:hover .logo-svg-pink-4 {
  transform: rotate(-60deg) translate3d(-21.875em, -0.625em, 0);
}
.logo:hover .logo-svg-pink-5 {
  transform: rotate(-22deg) translate3d(-7.5em, 5.625em, 0);
}
.logo:hover .logo-svg-red-1 {
  transform: rotate(5deg) translate3d(3.125em, -1.875em, 0);
}
.logo:hover .logo-svg-red-2 {
  transform: rotate(-20deg) translate3d(-5.9375em, 0.9375em, 0);
}
.logo:hover .logo-svg-red-3 {
  transform: rotate(17deg) translate3d(5em, 0em, 0);
}
.logo:hover .logo-svg-red-4 {
  transform: rotate(9deg) translate3d(3.125em, 1.25em, 0);
}
.logo:hover .logo-svg-red-5 {
  transform: rotate(-12deg) translate3d(-4.375em, 3.125em, 0);
}
.logo:hover .logo-svg-orange-1 {
  transform: rotate(8deg) translate3d(4.375em, -2.1875em, 0);
}
.logo:hover .logo-svg-orange-2 {
  transform: rotate(-23deg) translate3d(-6.25em, 0em, 0);
}
.logo:hover .logo-svg-orange-3 {
  transform: rotate(15deg) translate3d(0.625em, 1.125em, 0);
}
.logo:hover .logo-svg-orange-4 {
  transform: rotate(10deg) translate3d(2.5em, 1.75em, 0);
}
.logo:hover .logo-svg-yellow-1 {
  transform: rotate(20deg) translate3d(3.125em, 0em, 0);
}
.logo:hover .logo-svg-yellow-2 {
  transform: rotate(-14deg) translate3d(-5em, -1.0625em, 0);
}
.logo:hover .logo-svg-yellow-3 {
  transform: rotate(-5deg) translate3d(-0.9375em, -1.25em, 0);
}