/* Set the body and html to full screen height */
html, body {
	height: 100%;
	background: none #FFF;
}

body {
	min-height: 100%;
}

/* Remove dotted borders around the links when clicked */
a, a:active, a:focus, input:focus {
	text-decoration: none !important;
	outline: 0;
}

body {
	padding: 0;
	margin: 0;
	background: #FFFFFF;
	color: #5c5c5c; /* 474747 */
	font-family: 'Roboto Mono', monospace;
	font-size: 16px;
}

.content-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	z-index: 1;
}

.abs-fs {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-perspective: 1200px;
          perspective: 1200px;
  opacity: 0.23;
}

.content-wrapper::before {
	content: '';
	display: inline-block;
	height: 100%;
	margin-right: -0.25em;
	vertical-align: middle;
}

.v-center {
	position: relative;
	display: inline-block;
	width: 80%;
	text-align: center;
	vertical-align: middle;
}

/* Content Headings, Paragraphs */
.main-content {
	max-width: 480px;
	margin: 3.75em auto;
	font-size: 16px;
	text-align: left;
	line-height: 30px;
}

p {
	font-size: 1em;
	line-height: 1.875em;
	margin: 0;
	padding: 0 0 0.9375em 0;
}

h3 {
	margin: 0.938em 0 0;
	padding: 0;
	font-family: "Roboto", sans-serif;
	font-size: 1em;
	letter-spacing: 0.125em;
	color: #44C14C;
	line-height: 1.875em;
}

p a {
	color: #5c5c5c;
	border-bottom: 1px dashed #44C14C;
}

p a:hover {
	color: #44C14C;
}

.main-content p:last-child {
	padding: 0;
}

p span {
	color: #FFF;
	background: #44C14C;
	padding: 0.25em 0.5em;
}

/* Horizontal and vertical center content */
.abs-center {
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(50%,-50%); /* IE 9 */
	-webkit-transform: translate(50%,-50%); /* Safari */
	-moz-transform: translate(50%,-50%); /* Firefox Older versions*/
	-o-transform: translate(50%,-50%); /* Opera */
	transform: translate(50%,-50%);
}

.screen {
  visibility: hidden;
}

.canvas {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 270px;
  height: 211.95px;
  -webkit-transform: skewX(-40deg) translate3d(0, 0, 0);
          transform: skewX(-40deg) translate3d(0, 0, 0);
}

@-webkit-keyframes shrink {
  0% {
    opacity: 1;
    border-radius: 50%;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  10% {
    opacity: 1;
    border-radius: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  28% {
    opacity: 1;
    border-radius: 0;
    -webkit-transform: scale(1) translateX(-200%);
            transform: scale(1) translateX(-200%);
  }
  30% {
    opacity: 1;
    border-radius: 0;
    -webkit-transform: scale(1) translateX(-200%);
            transform: scale(1) translateX(-200%);
  }
  30.1% {
    opacity: 1;
    -webkit-transform: scaleX(1) translateY(0) translateX(-200%);
            transform: scaleX(1) translateY(0) translateX(-200%);
    -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
            animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  80%, 100% {
    opacity: 0;
    -webkit-transform: scaleX(0) translateY(-500%) translateX(-200%);
            transform: scaleX(0) translateY(-500%) translateX(-200%);
  }
}

@keyframes shrink {
  0% {
    opacity: 1;
    border-radius: 50%;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  10% {
    opacity: 1;
    border-radius: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  28% {
    opacity: 1;
    border-radius: 0;
    -webkit-transform: scale(1) translateX(-200%);
            transform: scale(1) translateX(-200%);
  }
  30% {
    opacity: 1;
    border-radius: 0;
    -webkit-transform: scale(1) translateX(-200%);
            transform: scale(1) translateX(-200%);
  }
  30.1% {
    opacity: 1;
    -webkit-transform: scaleX(1) translateY(0) translateX(-200%);
            transform: scaleX(1) translateY(0) translateX(-200%);
    -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
            animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  80%, 100% {
    opacity: 0;
    -webkit-transform: scaleX(0) translateY(-500%) translateX(-200%);
            transform: scaleX(0) translateY(-500%) translateX(-200%);
  }
}
.square {
  -ms-flex-preferred-size: 30px;
      flex-basis: 30px;
  height: 15px;
}
.square::before {
  content: '';
  margin: 0 auto;
  display: block;
  width: 50%;
  height: 100%;
  opacity: 1;
  border-radius: 50%;
  -webkit-transform: scale(0) translate3d(0, 0, 0);
          transform: scale(0) translate3d(0, 0, 0);
  -webkit-animation: shrink 5s infinite;
          animation: shrink 5s infinite;
}

.square:nth-child(n+61) {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.square:nth-child(17n-7) {
  margin-left: 15px;
}

.square:nth-child(1)::before {
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}

.square:nth-child(2)::before {
  -webkit-animation-delay: 3.1s;
          animation-delay: 3.1s;
}

.square:nth-child(3)::before {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

.square:nth-child(4)::before {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

.square:nth-child(5)::before {
  -webkit-animation-delay: 1.3s;
          animation-delay: 1.3s;
}

.square:nth-child(6)::before {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.square:nth-child(7)::before {
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}

.square:nth-child(8)::before {
  -webkit-animation-delay: 3.3s;
          animation-delay: 3.3s;
}

.square:nth-child(9)::before {
  -webkit-animation-delay: 3.3s;
          animation-delay: 3.3s;
}

.square:nth-child(10)::before {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

.square:nth-child(11)::before {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

.square:nth-child(12)::before {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}

.square:nth-child(13)::before {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.square:nth-child(14)::before {
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}

.square:nth-child(15)::before {
  -webkit-animation-delay: 2.9s;
          animation-delay: 2.9s;
}

.square:nth-child(16)::before {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

.square:nth-child(17)::before {
  -webkit-animation-delay: 2.1s;
          animation-delay: 2.1s;
}

.square:nth-child(18)::before {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

.square:nth-child(19)::before {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.square:nth-child(20)::before {
  -webkit-animation-delay: 2.8s;
          animation-delay: 2.8s;
}

.square:nth-child(21)::before {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.square:nth-child(22)::before {
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}

.square:nth-child(23)::before {
  -webkit-animation-delay: 2.4s;
          animation-delay: 2.4s;
}

.square:nth-child(24)::before {
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}

.square:nth-child(25)::before {
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}

.square:nth-child(26)::before {
  -webkit-animation-delay: 2.2s;
          animation-delay: 2.2s;
}

.square:nth-child(27)::before {
  -webkit-animation-delay: 3.5s;
          animation-delay: 3.5s;
}

.square:nth-child(28)::before {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.square:nth-child(29)::before {
  -webkit-animation-delay: 2.3s;
          animation-delay: 2.3s;
}

.square:nth-child(30)::before {
  -webkit-animation-delay: 1.7s;
          animation-delay: 1.7s;
}

.square:nth-child(31)::before {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.square:nth-child(32)::before {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.square:nth-child(33)::before {
  -webkit-animation-delay: 1.9s;
          animation-delay: 1.9s;
}

.square:nth-child(34)::before {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}

.square:nth-child(35)::before {
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}

.square:nth-child(36)::before {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}

.square:nth-child(37)::before {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}

.square:nth-child(38)::before {
  -webkit-animation-delay: 2.3s;
          animation-delay: 2.3s;
}

.square:nth-child(39)::before {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

.square:nth-child(40)::before {
  -webkit-animation-delay: 1.1s;
          animation-delay: 1.1s;
}

.square:nth-child(41)::before {
  -webkit-animation-delay: 3.1s;
          animation-delay: 3.1s;
}

.square:nth-child(42)::before {
  -webkit-animation-delay: 1.1s;
          animation-delay: 1.1s;
}

.square:nth-child(43)::before {
  -webkit-animation-delay: 1.9s;
          animation-delay: 1.9s;
}

.square:nth-child(44)::before {
  -webkit-animation-delay: 2.8s;
          animation-delay: 2.8s;
}

.square:nth-child(45)::before {
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}

.square:nth-child(46)::before {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.square:nth-child(47)::before {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.square:nth-child(48)::before {
  -webkit-animation-delay: 2.7s;
          animation-delay: 2.7s;
}

.square:nth-child(49)::before {
  -webkit-animation-delay: 3.5s;
          animation-delay: 3.5s;
}

.square:nth-child(50)::before {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.square:nth-child(51)::before {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}

.square:nth-child(52)::before {
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}

.square:nth-child(53)::before {
  -webkit-animation-delay: 2.6s;
          animation-delay: 2.6s;
}

.square:nth-child(54)::before {
  -webkit-animation-delay: 2.3s;
          animation-delay: 2.3s;
}

.square:nth-child(55)::before {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.square:nth-child(56)::before {
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}

.square:nth-child(57)::before {
  -webkit-animation-delay: 3.5s;
          animation-delay: 3.5s;
}

.square:nth-child(58)::before {
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}

.square:nth-child(59)::before {
  -webkit-animation-delay: 3.4s;
          animation-delay: 3.4s;
}

.square:nth-child(60)::before {
  -webkit-animation-delay: 3.2s;
          animation-delay: 3.2s;
}

.square:nth-child(61)::before {
  -webkit-animation-delay: 3.3s;
          animation-delay: 3.3s;
}

.square:nth-child(62)::before {
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}

.square:nth-child(63)::before {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.square:nth-child(64)::before {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}

.square:nth-child(65)::before {
  -webkit-animation-delay: 2.2s;
          animation-delay: 2.2s;
}

.square:nth-child(66)::before {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.square:nth-child(67)::before {
  -webkit-animation-delay: 2.6s;
          animation-delay: 2.6s;
}

.square:nth-child(68)::before {
  -webkit-animation-delay: 2.1s;
          animation-delay: 2.1s;
}

.square:nth-child(69)::before {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

.square:nth-child(70)::before {
  -webkit-animation-delay: 2.9s;
          animation-delay: 2.9s;
}

.square:nth-child(71)::before {
  -webkit-animation-delay: 2.3s;
          animation-delay: 2.3s;
}

.square:nth-child(72)::before {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

.square:nth-child(73)::before {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

.square:nth-child(74)::before {
  -webkit-animation-delay: 3.3s;
          animation-delay: 3.3s;
}

.square:nth-child(75)::before {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

.square:nth-child(76)::before {
  -webkit-animation-delay: 3.5s;
          animation-delay: 3.5s;
}

.square:nth-child(77)::before {
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}

.square:nth-child(78)::before {
  -webkit-animation-delay: 2.8s;
          animation-delay: 2.8s;
}

.square:nth-child(79)::before {
  -webkit-animation-delay: 2.3s;
          animation-delay: 2.3s;
}

.square:nth-child(80)::before {
  -webkit-animation-delay: 2.1s;
          animation-delay: 2.1s;
}

.square:nth-child(81)::before {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

.square:nth-child(82)::before {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

.square:nth-child(83)::before {
  -webkit-animation-delay: 3.1s;
          animation-delay: 3.1s;
}

.square:nth-child(84)::before {
  -webkit-animation-delay: 2.9s;
          animation-delay: 2.9s;
}

.square:nth-child(85)::before {
  -webkit-animation-delay: 3.1s;
          animation-delay: 3.1s;
}

.square:nth-child(86)::before {
  -webkit-animation-delay: 2.1s;
          animation-delay: 2.1s;
}

.square:nth-child(87)::before {
  -webkit-animation-delay: 1.7s;
          animation-delay: 1.7s;
}

.square:nth-child(88)::before {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

.square:nth-child(89)::before {
  -webkit-animation-delay: 2.3s;
          animation-delay: 2.3s;
}

.square:nth-child(90)::before {
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}

.square:nth-child(91)::before {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

.square:nth-child(92)::before {
  -webkit-animation-delay: 2.8s;
          animation-delay: 2.8s;
}

.square:nth-child(93)::before {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

.square:nth-child(94)::before {
  -webkit-animation-delay: 2.1s;
          animation-delay: 2.1s;
}

.square:nth-child(95)::before {
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}

.square:nth-child(96)::before {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

.square:nth-child(97)::before {
  -webkit-animation-delay: 1.3s;
          animation-delay: 1.3s;
}

.square:nth-child(98)::before {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.square:nth-child(99)::before {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.square:nth-child(100)::before {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}

.square:nth-child(101)::before {
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}

.square:nth-child(102)::before {
  -webkit-animation-delay: 3.2s;
          animation-delay: 3.2s;
}

.square:nth-child(103)::before {
  -webkit-animation-delay: 2.6s;
          animation-delay: 2.6s;
}

.square:nth-child(104)::before {
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}

.square:nth-child(105)::before {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.square:nth-child(106)::before {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}

.square:nth-child(107)::before {
  -webkit-animation-delay: 1.7s;
          animation-delay: 1.7s;
}

.square:nth-child(108)::before {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

.square:nth-child(109)::before {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

.square:nth-child(110)::before {
  -webkit-animation-delay: 2.4s;
          animation-delay: 2.4s;
}

.square:nth-child(111)::before {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}

.square:nth-child(112)::before {
  -webkit-animation-delay: 2.4s;
          animation-delay: 2.4s;
}

.square:nth-child(113)::before {
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}

.square:nth-child(114)::before {
  -webkit-animation-delay: 3.2s;
          animation-delay: 3.2s;
}

.square:nth-child(115)::before {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}

.square:nth-child(116)::before {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

.square:nth-child(117)::before {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

.square:nth-child(118)::before {
  -webkit-animation-delay: 2.4s;
          animation-delay: 2.4s;
}

.square:nth-child(119)::before {
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}

.square--aqua::before {
  background-color: aqua;
}

.square--gold::before {
  background-color: gold;
}

.square--tomato::before {
  background-color: tomato;
}