* {
  padding: 0;
  margin: 0;
  box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  color: #fff;
  background: #fff;
  font-family: 'Oswald', Verdana;
  font-weight: 300;
  overflow: hidden; }

html.step-2,
.step-2 body {
  background: #eee; }

.none {
  display: none; }

.clearfix {
  clear: both; }

.intro-start {
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%) scale(0);
  -o-transform: translate(-50%, -50%) scale(0);
  -ms-transform: translate(-50%, -50%) scale(0);
  -webkit-transform: translate(-50%, -50%) scale(0);
  transform: translate(-50%, -50%) scale(0);
  -webkit-border-radius: 50% 50% 50% 50%;
  -moz-border-radius: 50% 50% 50% 50%;
  border-radius: 50% 50% 50% 50%;
  width: 200px;
  height: 200px; }

.intro-start-1 {
  background: #222; }

.intro-start-2 {
  background: #eee;
  z-index: 2; }

.intro-start-3 {
  background: #4CAF50;
  z-index: 1; }

.intro {
  text-transform: uppercase;
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  width: 300px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: #F44336;
  z-index: 3;
  -webkit-border-radius: 50% 50% 50% 50%;
  -moz-border-radius: 50% 50% 50% 50%;
  border-radius: 50% 50% 50% 50%;
  -moz-transform: translate(-50%, -50%) scale(0);
  -o-transform: translate(-50%, -50%) scale(0);
  -ms-transform: translate(-50%, -50%) scale(0);
  -webkit-transform: translate(-50%, -50%) scale(0);
  transform: translate(-50%, -50%) scale(0); }

.intro span {
  display: inline-block;
  position: relative;
  color: #eee; }

.text-happy {
  position: absolute;
  top: 5%;
  left: 0;
  right: 0; }

.text-happy span {
  margin: 0 10px;
  opacity: 0; }

.text-easter span {
  margin: 0 8px;
  opacity: 0; }

.text-easter {
  position: absolute;
  bottom: 2%;
  left: 0;
  right: 0; }

.text-happy span:nth-of-type(1) {
  -moz-transform: rotate(-40deg);
  -o-transform: rotate(-40deg);
  -ms-transform: rotate(-40deg);
  -webkit-transform: rotate(-40deg);
  transform: rotate(-40deg);
  top: 40px; }

.text-happy span:nth-of-type(2) {
  -moz-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
  top: 10px; }

.text-happy span:nth-of-type(3) {
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  top: 0; }

.text-happy span:nth-of-type(4) {
  -moz-transform: rotate(10deg);
  -o-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -webkit-transform: rotate(10deg);
  transform: rotate(10deg);
  top: 10px; }

.text-happy span:nth-of-type(5) {
  -moz-transform: rotate(40deg);
  -o-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  -webkit-transform: rotate(40deg);
  transform: rotate(40deg);
  top: 40px; }

.text-easter span:nth-of-type(1) {
  -moz-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
  top: -60px;
  margin: 0; }

.text-easter span:nth-of-type(2) {
  -moz-transform: rotate(40deg);
  -o-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  -webkit-transform: rotate(40deg);
  transform: rotate(40deg);
  top: -20px; }

.text-easter span:nth-of-type(3) {
  -moz-transform: rotate(10deg);
  -o-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -webkit-transform: rotate(10deg);
  transform: rotate(10deg);
  top: 0px; }

.text-easter span:nth-of-type(4) {
  -moz-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
  top: 0px; }

.text-easter span:nth-of-type(5) {
  -moz-transform: rotate(-40deg);
  -o-transform: rotate(-40deg);
  -ms-transform: rotate(-40deg);
  -webkit-transform: rotate(-40deg);
  transform: rotate(-40deg);
  top: -20px; }

.text-easter span:nth-of-type(6) {
  -moz-transform: rotate(-60deg);
  -o-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
  top: -60px;
  margin: 0; }

.line {
  width: 60%;
  height: 2px;
  background: #ba160a;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -30%;
  -moz-transform: scaleX(0);
  -o-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -webkit-transform: scaleX(0);
  transform: scaleX(0); }

.line-1 {
  margin-top: -30px; }

.line-2 {
  margin-top: 20px; }

.line-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background: #F44336;
  -moz-transform: translateX(-50%) scale(0);
  -o-transform: translateX(-50%) scale(0);
  -ms-transform: translateX(-50%) scale(0);
  -webkit-transform: translateX(-50%) scale(0);
  transform: translateX(-50%) scale(0);
  -webkit-border-radius: 50% 50% 50% 50%;
  -moz-border-radius: 50% 50% 50% 50%;
  border-radius: 50% 50% 50% 50%; }

.line-dot::before {
  content: '';
  width: 60%;
  height: 60%;
  background: #ba160a;
  -webkit-border-radius: 50% 50% 50% 50%;
  -moz-border-radius: 50% 50% 50% 50%;
  border-radius: 50% 50% 50% 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

.line-dot-1 {
  margin-top: -34px; }

.line-dot-2 {
  margin-top: 16px; }

.intro-eggs span:nth-child(1) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -22px;
  margin-left: -26px;
  width: 28px;
  height: 37px;
  transform-origin: center bottom;
  border-top-left-radius: 50% 60%;
  border-top-right-radius: 50% 60%;
  border-bottom-left-radius: 50% 40%;
  border-bottom-right-radius: 50% 40%;
  -moz-transform: rotate(-20deg) scale(0);
  -o-transform: rotate(-20deg) scale(0);
  -ms-transform: rotate(-20deg) scale(0);
  -webkit-transform: rotate(-20deg) scale(0);
  transform: rotate(-20deg) scale(0);
  background: #ba160a;
  -moz-box-shadow: 0 0 0 #F44336;
  -webkit-box-shadow: 0 0 0 #F44336;
  -o-box-shadow: 0 0 0 #F44336;
  box-shadow: 0 0 0 #F44336; }

.intro-eggs span:nth-child(2) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -12px;
  margin-left: -12px;
  width: 20px;
  height: 25px;
  -moz-transform: rotate(10deg) scale(0);
  -o-transform: rotate(10deg) scale(0);
  -ms-transform: rotate(10deg) scale(0);
  -webkit-transform: rotate(10deg) scale(0);
  transform: rotate(10deg) scale(0);
  transform-origin: center bottom;
  border-top-left-radius: 50% 60%;
  border-top-right-radius: 50% 60%;
  border-bottom-left-radius: 50% 40%;
  border-bottom-right-radius: 50% 40%;
  background: #ba160a;
  -moz-box-shadow: 0 0 0 #F44336;
  -webkit-box-shadow: 0 0 0 #F44336;
  -o-box-shadow: 0 0 0 #F44336;
  box-shadow: 0 0 0 #F44336; }

.intro-eggs span:nth-child(3) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -12px;
  margin-left: 5px;
  width: 24px;
  height: 28px;
  -moz-transform: rotate(3deg) scale(0);
  -o-transform: rotate(3deg) scale(0);
  -ms-transform: rotate(3deg) scale(0);
  -webkit-transform: rotate(3deg) scale(0);
  transform: rotate(3deg) scale(0);
  transform-origin: center bottom;
  border-top-left-radius: 50% 60%;
  border-top-right-radius: 50% 60%;
  border-bottom-left-radius: 50% 40%;
  border-bottom-right-radius: 50% 40%;
  background: #ba160a;
  -moz-box-shadow: 0 0 0 #F44336;
  -webkit-box-shadow: 0 0 0 #F44336;
  -o-box-shadow: 0 0 0 #F44336;
  box-shadow: 0 0 0 #F44336; }

.intro-dots {
  height: 300px; }

.intro-dots.animated {
  -webkit-animation: rotateDots 30s infinite linear;
  -moz-animation: rotateDots 30s infinite linear;
  -o-animation: rotateDots 30s infinite linear;
  animation: rotateDots 30s infinite linear; }

@-webkit-keyframes rotateDots {
  0% {
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    -webkit-transform: rotate(0);
    transform: rotate(0); }
  100% {
    -moz-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg); } }
@-moz-keyframes rotateDots {
  0% {
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    -webkit-transform: rotate(0);
    transform: rotate(0); }
  100% {
    -moz-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg); } }
@-ms-keyframes rotateDots {
  0% {
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    -webkit-transform: rotate(0);
    transform: rotate(0); }
  100% {
    -moz-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg); } }
@keyframes rotateDots {
  0% {
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    -webkit-transform: rotate(0);
    transform: rotate(0); }
  100% {
    -moz-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg); } }
.intro-circle {
  width: 2px;
  height: 2px;
  background: #F44336;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -2px;
  margin-top: -2px;
  opacity: 0;
  -webkit-border-radius: 50% 50% 50% 50%;
  -moz-border-radius: 50% 50% 50% 50%;
  border-radius: 50% 50% 50% 50%; }

.intro-dots .intro-circle:nth-of-type(1) {
  transform: rotate(-90deg) translate(4em); }

.intro-dots .intro-circle:nth-of-type(2) {
  transform: rotate(-81deg) translate(4em); }

.intro-dots .intro-circle:nth-of-type(3) {
  transform: rotate(-72deg) translate(4em); }

.intro-dots .intro-circle:nth-of-type(4) {
  transform: rotate(-63deg) translate(4em); }

.intro-dots .intro-circle:nth-of-type(5) {
  transform: rotate(-54deg) translate(4em); }

.intro-dots .intro-circle:nth-of-type(6) {
  transform: rotate(-45deg) translate(4em); }

.intro-dots .intro-circle:nth-of-type(7) {
  transform: rotate(-36deg) translate(4em); }

.intro-dots .intro-circle:nth-of-type(8) {
  transform: rotate(-27deg) translate(4em); }

.intro-dots .intro-circle:nth-of-type(9) {
  transform: rotate(-18deg) translate(4em); }

.intro-dots .intro-circle:nth-of-type(10) {
  transform: rotate(-9deg) translate(4em); }

.intro-dots .intro-circle:nth-of-type(11) {
  transform: rotate(0deg) translate(4em); }

.intro-dots .intro-circle:nth-of-type(12) {
  transform: rotate(9deg) translate(4em); }

.intro-dots .intro-circle:nth-of-type(13) {
  transform: rotate(18deg) translate(4em); }

.intro-dots .intro-circle:nth-of-type(14) {
  transform: rotate(27deg) translate(4em); }

.intro-dots .intro-circle:nth-of-type(15) {
  transform: rotate(36deg) translate(4em); }

.intro-dots .intro-circle:nth-of-type(16) {
  transform: rotate(45deg) translate(4em); }

.intro-dots .intro-circle:nth-of-type(17) {
  transform: rotate(54deg) translate(4em); }

.intro-dots .intro-circle:nth-of-type(18) {
  transform: rotate(63deg) translate(4em); }

.intro-dots .intro-circle:nth-of-type(19) {
  transform: rotate(72deg) translate(4em); }

.intro-dots .intro-circle:nth-of-type(20) {
  transform: rotate(81deg) translate(4em); }

.intro-dots .intro-circle:nth-of-type(21) {
  transform: rotate(90deg) translate(4em); }

.intro-dots .intro-circle:nth-of-type(22) {
  transform: rotate(99deg) translate(4em); }

.intro-dots .intro-circle:nth-of-type(23) {
  transform: rotate(108deg) translate(4em); }

.intro-dots .intro-circle:nth-of-type(24) {
  transform: rotate(117deg) translate(4em); }

.intro-dots .intro-circle:nth-of-type(25) {
  transform: rotate(126deg) translate(4em); }

.intro-dots .intro-circle:nth-of-type(26) {
  transform: rotate(135deg) translate(4em); }

.intro-dots .intro-circle:nth-of-type(27) {
  transform: rotate(144deg) translate(4em); }

.intro-dots .intro-circle:nth-of-type(28) {
  transform: rotate(153deg) translate(4em); }

.intro-dots .intro-circle:nth-of-type(29) {
  transform: rotate(162deg) translate(4em); }

.intro-dots .intro-circle:nth-of-type(30) {
  transform: rotate(171deg) translate(4em); }

.intro-dots .intro-circle:nth-of-type(31) {
  transform: rotate(180deg) translate(4em); }

.intro-dots .intro-circle:nth-of-type(32) {
  transform: rotate(189deg) translate(4em); }

.intro-dots .intro-circle:nth-of-type(33) {
  transform: rotate(198deg) translate(4em); }

.intro-dots .intro-circle:nth-of-type(34) {
  transform: rotate(207deg) translate(4em); }

.intro-dots .intro-circle:nth-of-type(35) {
  transform: rotate(216deg) translate(4em); }

.intro-dots .intro-circle:nth-of-type(36) {
  transform: rotate(225deg) translate(4em); }

.intro-dots .intro-circle:nth-of-type(37) {
  transform: rotate(234deg) translate(4em); }

.intro-dots .intro-circle:nth-of-type(38) {
  transform: rotate(243deg) translate(4em); }

.intro-dots .intro-circle:nth-of-type(39) {
  transform: rotate(252deg) translate(4em); }

.intro-dots .intro-circle:nth-of-type(40) {
  transform: rotate(261deg) translate(4em); }

.egg {
  display: block;
  width: 20px;
  height: 25px;
  float: left;
  margin: 2px;
  position: relative;
  overflow: hidden;
  background: #00aaff;
  transform-origin: center bottom;
  border-top-left-radius: 50% 60%;
  border-top-right-radius: 50% 60%;
  border-bottom-left-radius: 50% 40%;
  border-bottom-right-radius: 50% 40%;
  -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); }

.egg::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjIiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
  background: -moz-linear-gradient(top, transparent 0%, transparent 3%, rgba(0, 0, 0, 0.2) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, transparent), color-stop(3%, transparent), color-stop(100%, rgba(0, 0, 0, 0.2)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, transparent 0%, transparent 3%, rgba(0, 0, 0, 0.2) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, transparent 0%, transparent 3%, rgba(0, 0, 0, 0.2) 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, transparent 0%, transparent 3%, rgba(0, 0, 0, 0.2) 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, transparent 0%, transparent 3%, rgba(0, 0, 0, 0.2) 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#33000000',GradientType=0 );
  /* IE6-8 */ }

.egg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block; }

.zigzag::before {
  background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.2) 25%, transparent 25%), linear-gradient(225deg, rgba(0, 0, 0, 0.2) 25%, transparent 25%), linear-gradient(315deg, rgba(0, 0, 0, 0.2) 25%, transparent 25%), linear-gradient(45deg, rgba(0, 0, 0, 0.2) 25%, transparent 25%);
  background-size: 10px 10px;
  background-position: -5px 0, -5px 0, 0 0, 0 0; }

.weird::before {
  background-image: radial-gradient(circle at 50% 100%, transparent 20%, rgba(0, 0, 0, 0.2) 52%, rgba(0, 0, 0, 0.2) 70%, transparent 69%, transparent), radial-gradient(circle at 50% 0%, transparent 20%, rgba(0, 0, 0, 0.2) 52%, rgba(0, 0, 0, 0.2) 70%, transparent 69%, transparent);
  background-position: 0 0, 0 -5px;
  background-size: 7.5px 10px; }

.line::before {
  background-image: radial-gradient(circle at 50% 100%, transparent 60%, rgba(0, 0, 0, 0.2) 81%, rgba(0, 0, 0, 0.2) 70%, transparent 69%, transparent), radial-gradient(circle at 50% 0%, transparent 60%, rgba(0, 0, 0, 0.2) 81%, rgba(0, 0, 0, 0.2) 70%, transparent 69%, transparent);
  background-position: 0 0, 0 -5px;
  background-size: 7.5px 10px; }

.diamond::before {
  background-image: radial-gradient(closest-side, transparent 97%, rgba(0, 0, 0, 0.2) 99%), radial-gradient(closest-side, transparent 97%, rgba(0, 0, 0, 0.2) 99%);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px; }

.dots::before {
  background-image: radial-gradient(rgba(0, 0, 0, 0.2) 15%, transparent 16%), radial-gradient(rgba(0, 0, 0, 0.6) 15%, transparent 16%);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px; }

/*# sourceMappingURL=style.css.map */