html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after {
  content: '';
  content: none; }

q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

.firefly_base {
  position: absolute;
  width: 100%;
  height: 100%; }

.AppWrap .firefly {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.5vw;
  height: 0.5vw;
  margin: -0.2vw 0 0 9.8vw;
  animation: ease 200s alternate infinite;
  pointer-events: none; }

.AppWrap .firefly::before,
.AppWrap .firefly::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform-origin: -10vw; }

.AppWrap .firefly::before {
  background: back;
  opacity: 0.4;
  animation: drift ease alternate infinite; }

.AppWrap .firefly::after {
  background: white;
  opacity: 0;
  box-shadow: 0 0 0vw 0vw yellow;
  animation: drift ease alternate infinite, flash ease infinite; }

.AppWrap .firefly:nth-child(1) {
  animation-name: move1; }

.AppWrap .firefly:nth-child(1)::before {
  animation-duration: 14s; }

.AppWrap .firefly:nth-child(1)::after {
  animation-duration: 14s, 6113ms;
  animation-delay: 0ms, 3625ms; }

@keyframes move1 {
  0% {
    transform: translateX(50vw) translateY(13vh) scale(0.55); }
  5% {
    transform: translateX(-7vw) translateY(2vh) scale(0.47); }
  10% {
    transform: translateX(-5vw) translateY(-6vh) scale(0.54); }
  15% {
    transform: translateX(-24vw) translateY(14vh) scale(0.59); }
  20% {
    transform: translateX(-7vw) translateY(-42vh) scale(0.98); }
  25% {
    transform: translateX(-29vw) translateY(6vh) scale(0.61); }
  30% {
    transform: translateX(17vw) translateY(-16vh) scale(0.71); }
  35% {
    transform: translateX(15vw) translateY(7vh) scale(0.87); }
  40% {
    transform: translateX(41vw) translateY(-1vh) scale(0.54); }
  45% {
    transform: translateX(7vw) translateY(-36vh) scale(0.99); }
  50% {
    transform: translateX(-33vw) translateY(27vh) scale(0.67); }
  55% {
    transform: translateX(-30vw) translateY(25vh) scale(0.97); }
  60% {
    transform: translateX(-10vw) translateY(-16vh) scale(0.63); }
  65% {
    transform: translateX(29vw) translateY(-22vh) scale(0.37); }
  70% {
    transform: translateX(-13vw) translateY(39vh) scale(0.28); }
  75% {
    transform: translateX(-25vw) translateY(-44vh) scale(0.32); }
  80% {
    transform: translateX(-11vw) translateY(24vh) scale(0.93); }
  85% {
    transform: translateX(-23vw) translateY(-24vh) scale(0.75); }
  90% {
    transform: translateX(25vw) translateY(48vh) scale(0.71); }
  95% {
    transform: translateX(33vw) translateY(-19vh) scale(0.58); }
  100% {
    transform: translateX(-40vw) translateY(-34vh) scale(0.76); } }

.AppWrap .firefly:nth-child(2) {
  animation-name: move2; }

.AppWrap .firefly:nth-child(2)::before {
  animation-duration: 13s; }

.AppWrap .firefly:nth-child(2)::after {
  animation-duration: 13s, 10682ms;
  animation-delay: 0ms, 6453ms; }

@keyframes move2 {
  0% {
    transform: translateX(25vw) translateY(15vh) scale(0.72); }
  4.5454545455% {
    transform: translateX(-49vw) translateY(-6vh) scale(0.35); }
  9.0909090909% {
    transform: translateX(38vw) translateY(35vh) scale(0.46); }
  13.6363636364% {
    transform: translateX(27vw) translateY(-16vh) scale(0.68); }
  18.1818181818% {
    transform: translateX(2vw) translateY(11vh) scale(0.61); }
  22.7272727273% {
    transform: translateX(5vw) translateY(-29vh) scale(0.45); }
  27.2727272727% {
    transform: translateX(49vw) translateY(17vh) scale(0.89); }
  31.8181818182% {
    transform: translateX(-29vw) translateY(23vh) scale(0.68); }
  36.3636363636% {
    transform: translateX(-14vw) translateY(44vh) scale(0.7); }
  40.9090909091% {
    transform: translateX(-36vw) translateY(-42vh) scale(0.3); }
  45.4545454545% {
    transform: translateX(9vw) translateY(-4vh) scale(0.86); }
  50% {
    transform: translateX(11vw) translateY(34vh) scale(0.3); }
  54.5454545455% {
    transform: translateX(-2vw) translateY(50vh) scale(0.88); }
  59.0909090909% {
    transform: translateX(21vw) translateY(-13vh) scale(0.27); }
  63.6363636364% {
    transform: translateX(28vw) translateY(32vh) scale(0.42); }
  68.1818181818% {
    transform: translateX(5vw) translateY(40vh) scale(0.43); }
  72.7272727273% {
    transform: translateX(11vw) translateY(19vh) scale(0.31); }
  77.2727272727% {
    transform: translateX(-21vw) translateY(45vh) scale(0.37); }
  81.8181818182% {
    transform: translateX(41vw) translateY(-33vh) scale(0.78); }
  86.3636363636% {
    transform: translateX(-41vw) translateY(7vh) scale(0.69); }
  90.9090909091% {
    transform: translateX(30vw) translateY(-29vh) scale(0.73); }
  95.4545454545% {
    transform: translateX(-38vw) translateY(31vh) scale(0.3); }
  100% {
    transform: translateX(-33vw) translateY(-5vh) scale(0.28); } }

.AppWrap .firefly:nth-child(3) {
  animation-name: move3; }

.AppWrap .firefly:nth-child(3)::before {
  animation-duration: 14s; }

.AppWrap .firefly:nth-child(3)::after {
  animation-duration: 14s, 5467ms;
  animation-delay: 0ms, 6693ms; }

@keyframes move3 {
  0% {
    transform: translateX(-29vw) translateY(50vh) scale(0.44); }
  5.5555555556% {
    transform: translateX(22vw) translateY(-10vh) scale(0.74); }
  11.1111111111% {
    transform: translateX(-17vw) translateY(27vh) scale(0.4); }
  16.6666666667% {
    transform: translateX(1vw) translateY(-11vh) scale(0.34); }
  22.2222222222% {
    transform: translateX(-28vw) translateY(8vh) scale(0.6); }
  27.7777777778% {
    transform: translateX(-9vw) translateY(7vh) scale(0.82); }
  33.3333333333% {
    transform: translateX(-20vw) translateY(36vh) scale(0.96); }
  38.8888888889% {
    transform: translateX(42vw) translateY(-2vh) scale(0.53); }
  44.4444444444% {
    transform: translateX(36vw) translateY(17vh) scale(0.51); }
  50% {
    transform: translateX(-3vw) translateY(-12vh) scale(0.84); }
  55.5555555556% {
    transform: translateX(22vw) translateY(48vh) scale(0.83); }
  61.1111111111% {
    transform: translateX(-44vw) translateY(17vh) scale(0.6); }
  66.6666666667% {
    transform: translateX(11vw) translateY(-28vh) scale(0.36); }
  72.2222222222% {
    transform: translateX(5vw) translateY(22vh) scale(0.26); }
  77.7777777778% {
    transform: translateX(12vw) translateY(38vh) scale(0.45); }
  83.3333333333% {
    transform: translateX(-11vw) translateY(-14vh) scale(0.72); }
  88.8888888889% {
    transform: translateX(-22vw) translateY(-48vh) scale(0.78); }
  94.4444444444% {
    transform: translateX(45vw) translateY(-8vh) scale(0.59); }
  100% {
    transform: translateX(41vw) translateY(38vh) scale(0.86); } }

.AppWrap .firefly:nth-child(4) {
  animation-name: move4; }

.AppWrap .firefly:nth-child(4)::before {
  animation-duration: 13s; }

.AppWrap .firefly:nth-child(4)::after {
  animation-duration: 13s, 5545ms;
  animation-delay: 0ms, 1413ms; }

@keyframes move4 {
  0% {
    transform: translateX(-42vw) translateY(33vh) scale(0.73); }
  4.7619047619% {
    transform: translateX(-27vw) translateY(21vh) scale(1); }
  9.5238095238% {
    transform: translateX(-31vw) translateY(-22vh) scale(0.95); }
  14.2857142857% {
    transform: translateX(21vw) translateY(-12vh) scale(0.48); }
  19.0476190476% {
    transform: translateX(-1vw) translateY(32vh) scale(0.31); }
  23.8095238095% {
    transform: translateX(25vw) translateY(-7vh) scale(0.46); }
  28.5714285714% {
    transform: translateX(17vw) translateY(-13vh) scale(0.62); }
  33.3333333333% {
    transform: translateX(-47vw) translateY(26vh) scale(0.49); }
  38.0952380952% {
    transform: translateX(50vw) translateY(14vh) scale(0.65); }
  42.8571428571% {
    transform: translateX(42vw) translateY(49vh) scale(0.97); }
  47.619047619% {
    transform: translateX(50vw) translateY(-28vh) scale(0.39); }
  52.380952381% {
    transform: translateX(-41vw) translateY(-43vh) scale(0.37); }
  57.1428571429% {
    transform: translateX(50vw) translateY(-14vh) scale(0.77); }
  61.9047619048% {
    transform: translateX(45vw) translateY(17vh) scale(0.68); }
  66.6666666667% {
    transform: translateX(39vw) translateY(-48vh) scale(0.62); }
  71.4285714286% {
    transform: translateX(6vw) translateY(30vh) scale(0.3); }
  76.1904761905% {
    transform: translateX(35vw) translateY(-45vh) scale(0.92); }
  80.9523809524% {
    transform: translateX(-24vw) translateY(24vh) scale(0.52); }
  85.7142857143% {
    transform: translateX(-47vw) translateY(33vh) scale(0.79); }
  90.4761904762% {
    transform: translateX(-30vw) translateY(25vh) scale(0.62); }
  95.2380952381% {
    transform: translateX(17vw) translateY(10vh) scale(0.61); }
  100% {
    transform: translateX(29vw) translateY(-40vh) scale(0.82); } }

.AppWrap .firefly:nth-child(5) {
  animation-name: move5; }

.AppWrap .firefly:nth-child(5)::before {
  animation-duration: 16s; }

.AppWrap .firefly:nth-child(5)::after {
  animation-duration: 16s, 10630ms;
  animation-delay: 0ms, 3087ms; }

@keyframes move5 {
  0% {
    transform: translateX(0vw) translateY(21vh) scale(0.59); }
  3.8461538462% {
    transform: translateX(38vw) translateY(-36vh) scale(0.33); }
  7.6923076923% {
    transform: translateX(18vw) translateY(44vh) scale(0.54); }
  11.5384615385% {
    transform: translateX(-11vw) translateY(-10vh) scale(0.65); }
  15.3846153846% {
    transform: translateX(-32vw) translateY(49vh) scale(0.35); }
  19.2307692308% {
    transform: translateX(9vw) translateY(-36vh) scale(0.58); }
  23.0769230769% {
    transform: translateX(4vw) translateY(40vh) scale(0.29); }
  26.9230769231% {
    transform: translateX(47vw) translateY(26vh) scale(0.31); }
  30.7692307692% {
    transform: translateX(-37vw) translateY(-12vh) scale(0.61); }
  34.6153846154% {
    transform: translateX(31vw) translateY(-5vh) scale(0.32); }
  38.4615384615% {
    transform: translateX(10vw) translateY(-4vh) scale(0.33); }
  42.3076923077% {
    transform: translateX(29vw) translateY(-21vh) scale(0.89); }
  46.1538461538% {
    transform: translateX(24vw) translateY(13vh) scale(0.58); }
  50% {
    transform: translateX(30vw) translateY(-23vh) scale(0.78); }
  53.8461538462% {
    transform: translateX(39vw) translateY(34vh) scale(0.53); }
  57.6923076923% {
    transform: translateX(-15vw) translateY(15vh) scale(0.49); }
  61.5384615385% {
    transform: translateX(-32vw) translateY(-25vh) scale(0.6); }
  65.3846153846% {
    transform: translateX(-41vw) translateY(-49vh) scale(0.48); }
  69.2307692308% {
    transform: translateX(-39vw) translateY(17vh) scale(0.39); }
  73.0769230769% {
    transform: translateX(7vw) translateY(13vh) scale(0.66); }
  76.9230769231% {
    transform: translateX(-40vw) translateY(-5vh) scale(0.53); }
  80.7692307692% {
    transform: translateX(-36vw) translateY(41vh) scale(0.75); }
  84.6153846154% {
    transform: translateX(-35vw) translateY(-11vh) scale(0.56); }
  88.4615384615% {
    transform: translateX(-16vw) translateY(-16vh) scale(0.51); }
  92.3076923077% {
    transform: translateX(29vw) translateY(-47vh) scale(0.63); }
  96.1538461538% {
    transform: translateX(1vw) translateY(-42vh) scale(0.79); }
  100% {
    transform: translateX(34vw) translateY(-24vh) scale(0.93); } }

.AppWrap .firefly:nth-child(6) {
  animation-name: move6; }

.AppWrap .firefly:nth-child(6)::before {
  animation-duration: 11s; }

.AppWrap .firefly:nth-child(6)::after {
  animation-duration: 11s, 5246ms;
  animation-delay: 0ms, 4103ms; }

@keyframes move6 {
  0% {
    transform: translateX(-21vw) translateY(-31vh) scale(0.44); }
  4.7619047619% {
    transform: translateX(14vw) translateY(-40vh) scale(0.43); }
  9.5238095238% {
    transform: translateX(39vw) translateY(44vh) scale(0.83); }
  14.2857142857% {
    transform: translateX(-30vw) translateY(16vh) scale(0.92); }
  19.0476190476% {
    transform: translateX(-13vw) translateY(27vh) scale(0.58); }
  23.8095238095% {
    transform: translateX(37vw) translateY(-45vh) scale(0.42); }
  28.5714285714% {
    transform: translateX(5vw) translateY(34vh) scale(0.48); }
  33.3333333333% {
    transform: translateX(-20vw) translateY(23vh) scale(0.51); }
  38.0952380952% {
    transform: translateX(-26vw) translateY(19vh) scale(1); }
  42.8571428571% {
    transform: translateX(-32vw) translateY(-15vh) scale(0.83); }
  47.619047619% {
    transform: translateX(-13vw) translateY(-5vh) scale(0.51); }
  52.380952381% {
    transform: translateX(49vw) translateY(45vh) scale(0.52); }
  57.1428571429% {
    transform: translateX(-21vw) translateY(-26vh) scale(0.93); }
  61.9047619048% {
    transform: translateX(-46vw) translateY(9vh) scale(0.35); }
  66.6666666667% {
    transform: translateX(45vw) translateY(20vh) scale(0.26); }
  71.4285714286% {
    transform: translateX(-24vw) translateY(-31vh) scale(0.27); }
  76.1904761905% {
    transform: translateX(14vw) translateY(-26vh) scale(0.59); }
  80.9523809524% {
    transform: translateX(-17vw) translateY(-16vh) scale(0.29); }
  85.7142857143% {
    transform: translateX(-45vw) translateY(-12vh) scale(0.98); }
  90.4761904762% {
    transform: translateX(22vw) translateY(35vh) scale(0.57); }
  95.2380952381% {
    transform: translateX(19vw) translateY(-23vh) scale(0.74); }
  100% {
    transform: translateX(45vw) translateY(-27vh) scale(0.76); } }

.AppWrap .firefly:nth-child(7) {
  animation-name: move7; }

.AppWrap .firefly:nth-child(7)::before {
  animation-duration: 11s; }

.AppWrap .firefly:nth-child(7)::after {
  animation-duration: 11s, 10775ms;
  animation-delay: 0ms, 1891ms; }

@keyframes move7 {
  0% {
    transform: translateX(-45vw) translateY(-20vh) scale(0.96); }
  4.7619047619% {
    transform: translateX(-11vw) translateY(-41vh) scale(0.73); }
  9.5238095238% {
    transform: translateX(35vw) translateY(47vh) scale(0.88); }
  14.2857142857% {
    transform: translateX(14vw) translateY(24vh) scale(0.34); }
  19.0476190476% {
    transform: translateX(6vw) translateY(-43vh) scale(0.9); }
  23.8095238095% {
    transform: translateX(15vw) translateY(39vh) scale(0.88); }
  28.5714285714% {
    transform: translateX(9vw) translateY(2vh) scale(0.85); }
  33.3333333333% {
    transform: translateX(36vw) translateY(-6vh) scale(0.71); }
  38.0952380952% {
    transform: translateX(-40vw) translateY(-21vh) scale(0.87); }
  42.8571428571% {
    transform: translateX(41vw) translateY(30vh) scale(0.74); }
  47.619047619% {
    transform: translateX(32vw) translateY(-46vh) scale(0.4); }
  52.380952381% {
    transform: translateX(-43vw) translateY(50vh) scale(0.58); }
  57.1428571429% {
    transform: translateX(17vw) translateY(-28vh) scale(0.31); }
  61.9047619048% {
    transform: translateX(32vw) translateY(-25vh) scale(0.42); }
  66.6666666667% {
    transform: translateX(47vw) translateY(-29vh) scale(0.55); }
  71.4285714286% {
    transform: translateX(-14vw) translateY(-36vh) scale(0.92); }
  76.1904761905% {
    transform: translateX(-20vw) translateY(-39vh) scale(0.44); }
  80.9523809524% {
    transform: translateX(-11vw) translateY(34vh) scale(0.26); }
  85.7142857143% {
    transform: translateX(27vw) translateY(-24vh) scale(0.42); }
  90.4761904762% {
    transform: translateX(-24vw) translateY(-32vh) scale(0.54); }
  95.2380952381% {
    transform: translateX(0vw) translateY(-26vh) scale(0.97); }
  100% {
    transform: translateX(13vw) translateY(32vh) scale(0.88); } }

.AppWrap .firefly:nth-child(8) {
  animation-name: move8; }

.AppWrap .firefly:nth-child(8)::before {
  animation-duration: 15s; }

.AppWrap .firefly:nth-child(8)::after {
  animation-duration: 15s, 5338ms;
  animation-delay: 0ms, 3727ms; }

@keyframes move8 {
  0% {
    transform: translateX(49vw) translateY(-41vh) scale(0.38); }
  4.347826087% {
    transform: translateX(-29vw) translateY(49vh) scale(0.89); }
  8.6956521739% {
    transform: translateX(41vw) translateY(-49vh) scale(0.91); }
  13.0434782609% {
    transform: translateX(-13vw) translateY(11vh) scale(0.27); }
  17.3913043478% {
    transform: translateX(-41vw) translateY(11vh) scale(0.38); }
  21.7391304348% {
    transform: translateX(36vw) translateY(-15vh) scale(0.91); }
  26.0869565217% {
    transform: translateX(-22vw) translateY(30vh) scale(0.39); }
  30.4347826087% {
    transform: translateX(44vw) translateY(-35vh) scale(0.43); }
  34.7826086957% {
    transform: translateX(-10vw) translateY(48vh) scale(0.69); }
  39.1304347826% {
    transform: translateX(-39vw) translateY(-1vh) scale(0.53); }
  43.4782608696% {
    transform: translateX(17vw) translateY(-7vh) scale(0.96); }
  47.8260869565% {
    transform: translateX(-5vw) translateY(20vh) scale(0.98); }
  52.1739130435% {
    transform: translateX(19vw) translateY(39vh) scale(0.33); }
  56.5217391304% {
    transform: translateX(34vw) translateY(-6vh) scale(0.93); }
  60.8695652174% {
    transform: translateX(-23vw) translateY(39vh) scale(0.98); }
  65.2173913043% {
    transform: translateX(-1vw) translateY(23vh) scale(0.99); }
  69.5652173913% {
    transform: translateX(-10vw) translateY(43vh) scale(0.33); }
  73.9130434783% {
    transform: translateX(-4vw) translateY(-39vh) scale(0.86); }
  78.2608695652% {
    transform: translateX(-37vw) translateY(-28vh) scale(0.45); }
  82.6086956522% {
    transform: translateX(-24vw) translateY(39vh) scale(0.39); }
  86.9565217391% {
    transform: translateX(-19vw) translateY(-19vh) scale(0.96); }
  91.3043478261% {
    transform: translateX(20vw) translateY(49vh) scale(0.48); }
  95.652173913% {
    transform: translateX(-14vw) translateY(14vh) scale(0.81); }
  100% {
    transform: translateX(35vw) translateY(30vh) scale(0.9); } }

.AppWrap .firefly:nth-child(9) {
  animation-name: move9; }

.AppWrap .firefly:nth-child(9)::before {
  animation-duration: 13s; }

.AppWrap .firefly:nth-child(9)::after {
  animation-duration: 13s, 6613ms;
  animation-delay: 0ms, 2097ms; }

@keyframes move9 {
  0% {
    transform: translateX(36vw) translateY(42vh) scale(0.99); }
  5.2631578947% {
    transform: translateX(-34vw) translateY(-29vh) scale(0.47); }
  10.5263157895% {
    transform: translateX(11vw) translateY(-43vh) scale(0.47); }
  15.7894736842% {
    transform: translateX(31vw) translateY(47vh) scale(0.97); }
  21.0526315789% {
    transform: translateX(-16vw) translateY(-43vh) scale(0.54); }
  26.3157894737% {
    transform: translateX(24vw) translateY(-37vh) scale(0.4); }
  31.5789473684% {
    transform: translateX(-4vw) translateY(-35vh) scale(0.5); }
  36.8421052632% {
    transform: translateX(16vw) translateY(-36vh) scale(0.76); }
  42.1052631579% {
    transform: translateX(-22vw) translateY(-44vh) scale(0.66); }
  47.3684210526% {
    transform: translateX(11vw) translateY(-42vh) scale(0.61); }
  52.6315789474% {
    transform: translateX(-21vw) translateY(-35vh) scale(0.48); }
  57.8947368421% {
    transform: translateX(31vw) translateY(-26vh) scale(0.43); }
  63.1578947368% {
    transform: translateX(37vw) translateY(28vh) scale(0.67); }
  68.4210526316% {
    transform: translateX(-37vw) translateY(-46vh) scale(0.89); }
  73.6842105263% {
    transform: translateX(28vw) translateY(-16vh) scale(0.82); }
  78.9473684211% {
    transform: translateX(48vw) translateY(-29vh) scale(0.52); }
  84.2105263158% {
    transform: translateX(45vw) translateY(36vh) scale(0.74); }
  89.4736842105% {
    transform: translateX(41vw) translateY(-39vh) scale(0.45); }
  94.7368421053% {
    transform: translateX(26vw) translateY(-48vh) scale(0.58); }
  100% {
    transform: translateX(48vw) translateY(-15vh) scale(0.92); } }

.AppWrap .firefly:nth-child(10) {
  animation-name: move10; }

.AppWrap .firefly:nth-child(10)::before {
  animation-duration: 9s; }

.AppWrap .firefly:nth-child(10)::after {
  animation-duration: 9s, 7246ms;
  animation-delay: 0ms, 3592ms; }

@keyframes move10 {
  0% {
    transform: translateX(14vw) translateY(-15vh) scale(0.62); }
  4% {
    transform: translateX(-36vw) translateY(40vh) scale(0.36); }
  8% {
    transform: translateX(-16vw) translateY(-9vh) scale(0.78); }
  12% {
    transform: translateX(-25vw) translateY(-37vh) scale(0.72); }
  16% {
    transform: translateX(-22vw) translateY(-2vh) scale(0.82); }
  20% {
    transform: translateX(-32vw) translateY(-16vh) scale(0.42); }
  24% {
    transform: translateX(-21vw) translateY(30vh) scale(0.73); }
  28% {
    transform: translateX(47vw) translateY(-7vh) scale(0.93); }
  32% {
    transform: translateX(-38vw) translateY(-29vh) scale(0.61); }
  36% {
    transform: translateX(-40vw) translateY(-14vh) scale(0.32); }
  40% {
    transform: translateX(-18vw) translateY(28vh) scale(0.52); }
  44% {
    transform: translateX(30vw) translateY(-18vh) scale(0.63); }
  48% {
    transform: translateX(-23vw) translateY(-18vh) scale(0.91); }
  52% {
    transform: translateX(-32vw) translateY(-33vh) scale(0.54); }
  56% {
    transform: translateX(3vw) translateY(37vh) scale(0.98); }
  60% {
    transform: translateX(-31vw) translateY(29vh) scale(0.73); }
  64% {
    transform: translateX(48vw) translateY(41vh) scale(0.63); }
  68% {
    transform: translateX(0vw) translateY(50vh) scale(0.79); }
  72% {
    transform: translateX(28vw) translateY(-24vh) scale(0.76); }
  76% {
    transform: translateX(-2vw) translateY(6vh) scale(0.72); }
  80% {
    transform: translateX(-26vw) translateY(9vh) scale(0.48); }
  84% {
    transform: translateX(-32vw) translateY(0vh) scale(0.78); }
  88% {
    transform: translateX(30vw) translateY(8vh) scale(0.47); }
  92% {
    transform: translateX(12vw) translateY(12vh) scale(0.95); }
  96% {
    transform: translateX(8vw) translateY(-41vh) scale(0.61); }
  100% {
    transform: translateX(-32vw) translateY(-6vh) scale(0.55); } }

.AppWrap .firefly:nth-child(11) {
  animation-name: move11; }

.AppWrap .firefly:nth-child(11)::before {
  animation-duration: 14s; }

.AppWrap .firefly:nth-child(11)::after {
  animation-duration: 14s, 6585ms;
  animation-delay: 0ms, 7657ms; }

@keyframes move11 {
  0% {
    transform: translateX(-37vw) translateY(42vh) scale(0.31); }
  3.7037037037% {
    transform: translateX(-34vw) translateY(33vh) scale(0.65); }
  7.4074074074% {
    transform: translateX(-41vw) translateY(-9vh) scale(0.26); }
  11.1111111111% {
    transform: translateX(-23vw) translateY(-22vh) scale(0.84); }
  14.8148148148% {
    transform: translateX(-8vw) translateY(17vh) scale(0.7); }
  18.5185185185% {
    transform: translateX(-25vw) translateY(-34vh) scale(0.43); }
  22.2222222222% {
    transform: translateX(42vw) translateY(-5vh) scale(0.9); }
  25.9259259259% {
    transform: translateX(-13vw) translateY(-45vh) scale(0.71); }
  29.6296296296% {
    transform: translateX(-19vw) translateY(4vh) scale(0.4); }
  33.3333333333% {
    transform: translateX(31vw) translateY(-14vh) scale(0.37); }
  37.037037037% {
    transform: translateX(39vw) translateY(-30vh) scale(0.29); }
  40.7407407407% {
    transform: translateX(35vw) translateY(49vh) scale(0.9); }
  44.4444444444% {
    transform: translateX(-43vw) translateY(-7vh) scale(0.71); }
  48.1481481481% {
    transform: translateX(-36vw) translateY(-30vh) scale(0.88); }
  51.8518518519% {
    transform: translateX(45vw) translateY(8vh) scale(0.46); }
  55.5555555556% {
    transform: translateX(-21vw) translateY(-10vh) scale(0.8); }
  59.2592592593% {
    transform: translateX(49vw) translateY(-5vh) scale(0.64); }
  62.962962963% {
    transform: translateX(-10vw) translateY(36vh) scale(0.7); }
  66.6666666667% {
    transform: translateX(-18vw) translateY(-13vh) scale(0.32); }
  70.3703703704% {
    transform: translateX(-1vw) translateY(16vh) scale(0.37); }
  74.0740740741% {
    transform: translateX(24vw) translateY(-14vh) scale(0.65); }
  77.7777777778% {
    transform: translateX(44vw) translateY(46vh) scale(0.64); }
  81.4814814815% {
    transform: translateX(12vw) translateY(48vh) scale(0.98); }
  85.1851851852% {
    transform: translateX(6vw) translateY(-2vh) scale(0.82); }
  88.8888888889% {
    transform: translateX(-35vw) translateY(-14vh) scale(0.39); }
  92.5925925926% {
    transform: translateX(5vw) translateY(35vh) scale(0.31); }
  96.2962962963% {
    transform: translateX(30vw) translateY(33vh) scale(0.64); }
  100% {
    transform: translateX(-49vw) translateY(49vh) scale(0.45); } }

.AppWrap .firefly:nth-child(12) {
  animation-name: move12; }

.AppWrap .firefly:nth-child(12)::before {
  animation-duration: 15s; }

.AppWrap .firefly:nth-child(12)::after {
  animation-duration: 15s, 7082ms;
  animation-delay: 0ms, 6756ms; }

@keyframes move12 {
  0% {
    transform: translateX(-30vw) translateY(20vh) scale(0.49); }
  5.8823529412% {
    transform: translateX(-12vw) translateY(-32vh) scale(0.75); }
  11.7647058824% {
    transform: translateX(-15vw) translateY(45vh) scale(0.3); }
  17.6470588235% {
    transform: translateX(30vw) translateY(-31vh) scale(0.48); }
  23.5294117647% {
    transform: translateX(21vw) translateY(-43vh) scale(0.6); }
  29.4117647059% {
    transform: translateX(13vw) translateY(6vh) scale(0.26); }
  35.2941176471% {
    transform: translateX(-14vw) translateY(21vh) scale(0.34); }
  41.1764705882% {
    transform: translateX(36vw) translateY(-23vh) scale(0.76); }
  47.0588235294% {
    transform: translateX(-18vw) translateY(26vh) scale(0.35); }
  52.9411764706% {
    transform: translateX(44vw) translateY(31vh) scale(0.28); }
  58.8235294118% {
    transform: translateX(-46vw) translateY(-16vh) scale(0.93); }
  64.7058823529% {
    transform: translateX(7vw) translateY(12vh) scale(0.45); }
  70.5882352941% {
    transform: translateX(1vw) translateY(11vh) scale(0.82); }
  76.4705882353% {
    transform: translateX(47vw) translateY(35vh) scale(0.97); }
  82.3529411765% {
    transform: translateX(44vw) translateY(-26vh) scale(1); }
  88.2352941176% {
    transform: translateX(-38vw) translateY(22vh) scale(0.32); }
  94.1176470588% {
    transform: translateX(0vw) translateY(13vh) scale(0.68); }
  100% {
    transform: translateX(-8vw) translateY(21vh) scale(0.99); } }

.AppWrap .firefly:nth-child(13) {
  animation-name: move13; }

.AppWrap .firefly:nth-child(13)::before {
  animation-duration: 18s; }

.AppWrap .firefly:nth-child(13)::after {
  animation-duration: 18s, 6198ms;
  animation-delay: 0ms, 5099ms; }

@keyframes move13 {
  0% {
    transform: translateX(-29vw) translateY(-43vh) scale(0.4); }
  5% {
    transform: translateX(15vw) translateY(11vh) scale(0.52); }
  10% {
    transform: translateX(-28vw) translateY(-6vh) scale(0.81); }
  15% {
    transform: translateX(46vw) translateY(-40vh) scale(0.98); }
  20% {
    transform: translateX(-40vw) translateY(6vh) scale(0.37); }
  25% {
    transform: translateX(21vw) translateY(-39vh) scale(0.88); }
  30% {
    transform: translateX(47vw) translateY(-7vh) scale(0.34); }
  35% {
    transform: translateX(-24vw) translateY(-5vh) scale(0.45); }
  40% {
    transform: translateX(49vw) translateY(-1vh) scale(0.49); }
  45% {
    transform: translateX(-30vw) translateY(27vh) scale(0.42); }
  50% {
    transform: translateX(-14vw) translateY(-49vh) scale(0.89); }
  55% {
    transform: translateX(-28vw) translateY(17vh) scale(0.48); }
  60% {
    transform: translateX(-21vw) translateY(-26vh) scale(0.91); }
  65% {
    transform: translateX(-39vw) translateY(-38vh) scale(0.67); }
  70% {
    transform: translateX(6vw) translateY(-39vh) scale(0.88); }
  75% {
    transform: translateX(-47vw) translateY(-26vh) scale(0.52); }
  80% {
    transform: translateX(8vw) translateY(-29vh) scale(0.7); }
  85% {
    transform: translateX(-27vw) translateY(7vh) scale(0.28); }
  90% {
    transform: translateX(2vw) translateY(42vh) scale(0.6); }
  95% {
    transform: translateX(28vw) translateY(13vh) scale(0.42); }
  100% {
    transform: translateX(-8vw) translateY(11vh) scale(0.88); } }

.AppWrap .firefly:nth-child(14) {
  animation-name: move14; }

.AppWrap .firefly:nth-child(14)::before {
  animation-duration: 10s; }

.AppWrap .firefly:nth-child(14)::after {
  animation-duration: 10s, 5404ms;
  animation-delay: 0ms, 6895ms; }

@keyframes move14 {
  0% {
    transform: translateX(-35vw) translateY(43vh) scale(0.69); }
  4.7619047619% {
    transform: translateX(-38vw) translateY(31vh) scale(0.54); }
  9.5238095238% {
    transform: translateX(42vw) translateY(34vh) scale(0.46); }
  14.2857142857% {
    transform: translateX(-1vw) translateY(9vh) scale(0.62); }
  19.0476190476% {
    transform: translateX(-47vw) translateY(31vh) scale(0.67); }
  23.8095238095% {
    transform: translateX(39vw) translateY(-12vh) scale(0.5); }
  28.5714285714% {
    transform: translateX(1vw) translateY(-5vh) scale(0.66); }
  33.3333333333% {
    transform: translateX(9vw) translateY(3vh) scale(0.87); }
  38.0952380952% {
    transform: translateX(46vw) translateY(-29vh) scale(0.53); }
  42.8571428571% {
    transform: translateX(-22vw) translateY(-18vh) scale(0.71); }
  47.619047619% {
    transform: translateX(17vw) translateY(4vh) scale(0.38); }
  52.380952381% {
    transform: translateX(14vw) translateY(-27vh) scale(0.79); }
  57.1428571429% {
    transform: translateX(-49vw) translateY(47vh) scale(0.82); }
  61.9047619048% {
    transform: translateX(36vw) translateY(9vh) scale(0.9); }
  66.6666666667% {
    transform: translateX(-14vw) translateY(-28vh) scale(0.76); }
  71.4285714286% {
    transform: translateX(-11vw) translateY(23vh) scale(0.71); }
  76.1904761905% {
    transform: translateX(-36vw) translateY(-16vh) scale(0.47); }
  80.9523809524% {
    transform: translateX(4vw) translateY(43vh) scale(0.45); }
  85.7142857143% {
    transform: translateX(37vw) translateY(29vh) scale(0.7); }
  90.4761904762% {
    transform: translateX(-8vw) translateY(31vh) scale(0.45); }
  95.2380952381% {
    transform: translateX(41vw) translateY(-40vh) scale(0.41); }
  100% {
    transform: translateX(-42vw) translateY(6vh) scale(0.45); } }

.AppWrap .firefly:nth-child(15) {
  animation-name: move15; }

.AppWrap .firefly:nth-child(15)::before {
  animation-duration: 11s; }

.AppWrap .firefly:nth-child(15)::after {
  animation-duration: 11s, 10326ms;
  animation-delay: 0ms, 5745ms; }

@keyframes move15 {
  0% {
    transform: translateX(-2vw) translateY(-36vh) scale(0.35); }
  5.2631578947% {
    transform: translateX(-35vw) translateY(-2vh) scale(0.96); }
  10.5263157895% {
    transform: translateX(43vw) translateY(13vh) scale(0.61); }
  15.7894736842% {
    transform: translateX(-47vw) translateY(37vh) scale(0.74); }
  21.0526315789% {
    transform: translateX(43vw) translateY(-23vh) scale(0.28); }
  26.3157894737% {
    transform: translateX(-47vw) translateY(-23vh) scale(0.95); }
  31.5789473684% {
    transform: translateX(28vw) translateY(30vh) scale(0.89); }
  36.8421052632% {
    transform: translateX(12vw) translateY(-6vh) scale(0.94); }
  42.1052631579% {
    transform: translateX(14vw) translateY(30vh) scale(0.98); }
  47.3684210526% {
    transform: translateX(-46vw) translateY(-40vh) scale(0.36); }
  52.6315789474% {
    transform: translateX(-46vw) translateY(-28vh) scale(0.89); }
  57.8947368421% {
    transform: translateX(-23vw) translateY(44vh) scale(0.98); }
  63.1578947368% {
    transform: translateX(-19vw) translateY(39vh) scale(0.48); }
  68.4210526316% {
    transform: translateX(-1vw) translateY(-29vh) scale(0.73); }
  73.6842105263% {
    transform: translateX(-25vw) translateY(30vh) scale(0.77); }
  78.9473684211% {
    transform: translateX(50vw) translateY(-19vh) scale(0.57); }
  84.2105263158% {
    transform: translateX(-14vw) translateY(-34vh) scale(0.95); }
  89.4736842105% {
    transform: translateX(-14vw) translateY(-28vh) scale(0.82); }
  94.7368421053% {
    transform: translateX(-48vw) translateY(50vh) scale(0.69); }
  100% {
    transform: translateX(-10vw) translateY(20vh) scale(0.68); } }

@keyframes drift {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

@keyframes flash {
  0%,
  30%,
  100% {
    opacity: 0;
    box-shadow: 0 0 0vw 0vw white; }
  5% {
    opacity: 1;
    box-shadow: 0 0 2vw 0.4vw white; } }

.App {
  text-align: center; }

body {
  overflow: auto;
  font-family: "Barlow", sans-serif;
  font-weight: 500;
  font-style: normal; }

h2 {
  color: #fff;
  font-weight: 600;
  font-size: 2.5rem;
  margin: 0 0 1.5rem 0; }
  h2 span {
    color: #3F1114; }

.page2,
.page3 {
  padding: 3rem; }

p,
a {
  font-size: 16px; }

.rhl {
  color: #fff; }

a {
  color: #fff;
  text-decoration: underline; }

a:hover {
  opacity: 0.5; }

.App {
  min-height: 100vh;
  width: 100%;
  opacity: 1; }

.mnuface {
  background: url(../components/images/pd.png);
  background-position: bottom center;
  background-size: 320px 268px;
  background-repeat: no-repeat;
  position: fixed;
  z-index: 255;
  width: 320px;
  height: 268px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto; }
  @media (max-width: 700px) {
    .mnuface {
      background-size: 300px 251px;
      width: 300px;
      height: 251px; } }

body {
  background: linear-gradient(-45deg, #fc7790, #d83948, #E62D37, #f41435);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite; }

body,
html {
  height: 100%;
  width: 100%; }

@keyframes gradientBG {
  0% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 50%; }
  100% {
    background-position: 0% 50%; } }

.intro_cont {
  min-height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start; }
  .intro_cont .intro .logo {
    width: 140px;
    margin-left: 40px; }
    .intro_cont .intro .logo img {
      height: auto;
      width: 100%; }
  @media (max-width: 1024px) {
    .intro_cont {
      align-items: center;
      justify-content: flex-start;
      padding-top: 2rem;
      padding-bottom: 18rem; }
      .intro_cont .intro .logo {
        width: 100%;
        margin-left: 0px; }
        .intro_cont .intro .logo img {
          max-width: 5.5rem; } }

@-webkit-keyframes slide {
  100% {
    right: 0; } }

@keyframes slide {
  100% {
    right: 0; } }

.intro {
  display: flex;
  flex-direction: row;
  align-items: center; }
  @media (max-width: 1024px) {
    .intro {
      flex-direction: column; } }
  .intro .intro_txt {
    letter-spacing: 1.1px;
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    margin-left: 30px;
    flex-direction: column;
    font-size: 30px;
    color: #3F1114;
    margin-right: 40px; }
    @media (max-width: 1024px) {
      .intro .intro_txt {
        margin-right: 0; } }
    .intro .intro_txt ul {
      padding: 0;
      margin: 0;
      display: flex;
      align-items: flex-start;
      gap: 0.8rem;
      padding-top: 0.3rem; }
      @media (max-width: 1024px) {
        .intro .intro_txt ul {
          gap: 1.2rem;
          justify-content: center;
          flex-wrap: wrap;
          row-gap: 0;
          padding-top: 0; } }
      .intro .intro_txt ul li {
        list-style-type: none;
        text-align: left;
        line-height: 1.2;
        font-weight: 400; }
        @media (max-width: 1340px) {
          .intro .intro_txt ul li {
            font-size: 1.5rem; } }
        @media (max-width: 1340px) {
          .intro .intro_txt ul li {
            font-size: 1.25rem; } }
        @media (max-width: 1024px) {
          .intro .intro_txt ul li {
            font-size: 1.3rem;
            text-align: center; } }
    .intro .intro_txt p:first-of-type {
      font-size: 3rem;
      margin-top: 0.4rem;
      font-weight: 700;
      text-align: left; }
      @media (max-width: 1340px) {
        .intro .intro_txt p:first-of-type {
          margin-top: 0;
          font-size: 2.5rem; } }
    .intro .intro_txt span {
      color: #fff; }
    @media (max-width: 1024px) {
      .intro .intro_txt {
        margin-left: 0; }
        .intro .intro_txt p:first-of-type {
          font-size: 2rem; }
        .intro .intro_txt span {
          display: block;
          margin-top: 0.8rem; }
        .intro .intro_txt .title {
          display: flex;
          align-items: center;
          justify-content: center;
          padding-top: 1.1rem;
          padding-bottom: 2rem; }
        .intro .intro_txt .title span {
          display: inline-block;
          margin-top: 0; } }

.page2 {
  min-height: 1000px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center; }

.animation-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1; }

.animation-container span {
  color: rgba(234, 234, 234, 0.9);
  display: block;
  font-size: 14px;
  font-family: "Barlow", sans-serif;
  font-weight: 300;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
  position: absolute;
  user-select: none;
  pointer-events: none;
  cursor: default;
  z-index: 1;
  opacity: 0;
  will-change: transform, opacity;
  animation-timing-function: ease-out;
  animation-name: move; }

@keyframes move {
  0% {
    opacity: 0;
    transform: translateY(100vh); }
  25% {
    opacity: 1; }
  50% {
    opacity: 1; }
  75% {
    opacity: 0; }
  100% {
    opacity: 0;
    transform: none; } }

.pie {
  max-width: 12rem;
  position: relative;
  margin: auto; }
  .pie__frame {
    stroke: #eaeaea;
    stroke-width: 2px;
    fill: none; }
  .pie__circle {
    stroke: #371114;
    stroke-width: 2px;
    stroke-linecap: round;
    fill: none; }
  .pie__canvas {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    z-index: 2; }
  .pie__circle {
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    animation: pie-fill 2s reverse; }
    .pie__circle[stroke-dasharray="0 100"] {
      stroke: none; }
  .pie__text {
    font-size: 2.2rem;
    letter-spacing: -0.15rem;
    text-align: center;
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    z-index: 3;
    transform: translateY(-50%);
    animation: text-slideup 2s linear; }
  .pie--negative .pie__circle {
    transform: rotate(-90deg) scaleY(-1); }

@keyframes pie-fill {
  to {
    stroke-dasharray: 0 100; } }

@keyframes text-slideup {
  from {
    opacity: 0;
    transform: translateY(0%); }
  to {
    opacity: 1;
    transform: translateY(-50%); } }

.pies {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center; }
  .pies p {
    color: 000;
    font-weight: 300;
    font-size: 1.2rem;
    line-height: 1.4;
    margin-bottom: 1rem;
    letter-spacing: 1.4px; }

.pie {
  margin: 1rem; }

.exp_txt {
  max-width: 67rem;
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem; }

.hide {
  display: none; }

.cd-image-replace {
  /* replace text with image */
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  color: transparent; }

/* -------------------------------- 

Navigation trigger - visible on small devices only

-------------------------------- */
.cd-nav-trigger {
  display: block;
  position: fixed;
  z-index: 2;
  bottom: 30px;
  right: 5%;
  height: 44px;
  width: 44px;
  border-radius: 0.25em;
  background: rgba(234, 242, 227, 0.9);
  /* reset button style */
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  border: none;
  outline: none; }

.cd-nav-trigger span {
  /* central dot */
  position: absolute;
  height: 4px;
  width: 4px;
  background-color: #3a2c41;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%); }

.cd-nav-trigger span::before,
.cd-nav-trigger span::after {
  /* bottom and top dots */
  content: '';
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #3a2c41;
  border-radius: inherit; }

.cd-nav-trigger span::before {
  top: -9px; }

.cd-nav-trigger span::after {
  bottom: -9px; }

@media only screen and (min-width: 800px) {
  .cd-nav-trigger {
    display: none; } }

/* -------------------------------- 

Vertical navigation

-------------------------------- */
.cd-vertical-nav {
  position: fixed;
  z-index: 999;
  right: 5%;
  bottom: 30px;
  width: 90%;
  max-width: 400px;
  max-height: 90%;
  overflow-y: auto;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: right bottom;
  -moz-transform-origin: right bottom;
  -ms-transform-origin: right bottom;
  -o-transform-origin: right bottom;
  transform-origin: right bottom;
  -webkit-transition: -webkit-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  transition: transform 0.2s;
  border-radius: 0.25em;
  background-color: rgba(234, 242, 227, 0.9); }

.cd-vertical-nav a {
  display: block;
  padding: 1em;
  color: #d54344;
  font-weight: bold;
  border-bottom: 1px solid rgba(58, 44, 65, 0.1); }

.cd-vertical-nav a.active {
  color: #41191e; }

.cd-vertical-nav.open {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-overflow-scrolling: touch; }

.cd-vertical-nav.open + .cd-nav-trigger {
  background-color: transparent; }

.cd-vertical-nav.open + .cd-nav-trigger span {
  background-color: rgba(58, 44, 65, 0); }

.cd-vertical-nav.open + .cd-nav-trigger span::before,
.cd-vertical-nav.open + .cd-nav-trigger span::after {
  /* transform dots in 'X' icon */
  height: 3px;
  width: 20px;
  border-radius: 0;
  left: -8px; }

.cd-vertical-nav.open + .cd-nav-trigger span::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 1px; }

.cd-vertical-nav.open + .cd-nav-trigger span::after {
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
  bottom: 0; }

@media only screen and (min-width: 800px) {
  .cd-vertical-nav {
    /* reset style */
    right: 0;
    top: 0;
    bottom: auto;
    height: 100vh;
    width: 90px;
    max-width: none;
    max-height: none;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    background-color: transparent;
    /* vertically align its content*/
    display: table; }
  .cd-vertical-nav::before {
    /* this is the navigation background */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: -webkit-transform 0.4s;
    -moz-transition: -moz-transform 0.4s;
    transition: transform 0.4s; }
  .no-touch .cd-vertical-nav:hover::before,
  .touch .cd-vertical-nav::before {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0); }
  .cd-vertical-nav ul {
    /* vertically align <ul> inside <nav>*/
    display: table-cell;
    vertical-align: middle;
    text-align: center; }
  .cd-vertical-nav a {
    position: relative;
    padding: 3em 0 0;
    margin: 1.4em auto;
    border-bottom: none;
    font-size: 1.2rem;
    color: #d54344; }
  .cd-vertical-nav a.active {
    color: #eaf2e3; }
  .cd-vertical-nav a::before,
  .cd-vertical-nav a::after {
    /* used to create the filled circle and the background icon */
    content: '';
    position: absolute;
    left: 50%;
    /* Force Hardware Acceleration */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0); }
  .cd-vertical-nav a::before {
    /* filled circle */
    top: 0;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    background: #eaf2e3;
    -webkit-transform: translateX(-50%) scale(0.25);
    -moz-transform: translateX(-50%) scale(0.25);
    -ms-transform: translateX(-50%) scale(0.25);
    -o-transform: translateX(-50%) scale(0.25);
    transform: translateX(-50%) scale(0.25);
    -webkit-transition: -webkit-transform 0.4s, background-color 0.2s;
    -moz-transition: -moz-transform 0.4s, background-color 0.2s;
    transition: transform 0.4s, background-color 0.2s; }
  .cd-vertical-nav a::after {
    /* icon */
    opacity: 0;
    top: 8px;
    height: 16px;
    width: 16px;
    background: url(../img/cd-nav-icons.svg) no-repeat;
    -webkit-transform: translateX(-50%) scale(0);
    -moz-transform: translateX(-50%) scale(0);
    -ms-transform: translateX(-50%) scale(0);
    -o-transform: translateX(-50%) scale(0);
    transform: translateX(-50%) scale(0);
    -webkit-transition: -webkit-transform 0.4s 0s, opacity 0.1s 0.3s;
    -moz-transition: -moz-transform 0.4s 0s, opacity 0.1s 0.3s;
    transition: transform 0.4s 0s, opacity 0.1s 0.3s; }
  .cd-vertical-nav a.active::before,
  .no-touch .cd-vertical-nav a:hover::before {
    background-color: #c0a672; }
  .cd-vertical-nav li:first-of-type a::after {
    /* change icon using image sprites */
    background-position: 0px -48px;
    /* fix bug with transitions - set scale(0.01) rather than scale(0) */
    -webkit-transform: translateX(-50%) translateY(4.5em) scale(0.01);
    -moz-transform: translateX(-50%) translateY(4.5em) scale(0.01);
    -ms-transform: translateX(-50%) translateY(4.5em) scale(0.01);
    -o-transform: translateX(-50%) translateY(4.5em) scale(0.01);
    transform: translateX(-50%) translateY(4.5em) scale(0.01); }
  .cd-vertical-nav li:first-of-type a::before {
    -webkit-transform: translateX(-50%) translateY(4.5em) scale(0.25);
    -moz-transform: translateX(-50%) translateY(4.5em) scale(0.25);
    -ms-transform: translateX(-50%) translateY(4.5em) scale(0.25);
    -o-transform: translateX(-50%) translateY(4.5em) scale(0.25);
    transform: translateX(-50%) translateY(4.5em) scale(0.25); }
  .cd-vertical-nav li:nth-of-type(2) a::after {
    background-position: 0px -32px;
    -webkit-transform: translateX(-50%) translateY(1.5em) scale(0.01);
    -moz-transform: translateX(-50%) translateY(1.5em) scale(0.01);
    -ms-transform: translateX(-50%) translateY(1.5em) scale(0.01);
    -o-transform: translateX(-50%) translateY(1.5em) scale(0.01);
    transform: translateX(-50%) translateY(1.5em) scale(0.01); }
  .cd-vertical-nav li:nth-of-type(2) a::before {
    -webkit-transform: translateX(-50%) translateY(1.5em) scale(0.25);
    -moz-transform: translateX(-50%) translateY(1.5em) scale(0.25);
    -ms-transform: translateX(-50%) translateY(1.5em) scale(0.25);
    -o-transform: translateX(-50%) translateY(1.5em) scale(0.25);
    transform: translateX(-50%) translateY(1.5em) scale(0.25); }
  .cd-vertical-nav li:nth-of-type(3) a::after {
    background-position: 0px -16px;
    -webkit-transform: translateX(-50%) translateY(-1.5em) scale(0.01);
    -moz-transform: translateX(-50%) translateY(-1.5em) scale(0.01);
    -ms-transform: translateX(-50%) translateY(-1.5em) scale(0.01);
    -o-transform: translateX(-50%) translateY(-1.5em) scale(0.01);
    transform: translateX(-50%) translateY(-1.5em) scale(0.01); }
  .cd-vertical-nav li:nth-of-type(3) a::before {
    -webkit-transform: translateX(-50%) translateY(-1.5em) scale(0.25);
    -moz-transform: translateX(-50%) translateY(-1.5em) scale(0.25);
    -ms-transform: translateX(-50%) translateY(-1.5em) scale(0.25);
    -o-transform: translateX(-50%) translateY(-1.5em) scale(0.25);
    transform: translateX(-50%) translateY(-1.5em) scale(0.25); }
  .cd-vertical-nav li:nth-of-type(4) a::after {
    background-position: 0px 0px;
    -webkit-transform: translateX(-50%) translateY(-4.5em) scale(0.01);
    -moz-transform: translateX(-50%) translateY(-4.5em) scale(0.01);
    -ms-transform: translateX(-50%) translateY(-4.5em) scale(0.01);
    -o-transform: translateX(-50%) translateY(-4.5em) scale(0.01);
    transform: translateX(-50%) translateY(-4.5em) scale(0.01); }
  .cd-vertical-nav li:nth-of-type(4) a::before {
    -webkit-transform: translateX(-50%) translateY(-4.5em) scale(0.25);
    -moz-transform: translateX(-50%) translateY(-4.5em) scale(0.25);
    -ms-transform: translateX(-50%) translateY(-4.5em) scale(0.25);
    -o-transform: translateX(-50%) translateY(-4.5em) scale(0.25);
    transform: translateX(-50%) translateY(-4.5em) scale(0.25); }
  .cd-vertical-nav .label {
    display: block;
    /* Force Hardware Acceleration */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: -webkit-transform 0.4s;
    -moz-transition: -moz-transform 0.4s;
    transition: transform 0.4s; }
  .no-touch .cd-vertical-nav:hover a::before,
  .no-touch .cd-vertical-nav:hover a::after,
  .touch .cd-vertical-nav li:nth-of-type(n) a::before,
  .touch .cd-vertical-nav li:nth-of-type(n) a::after {
    -webkit-transform: translateX(-50%) scale(1);
    -moz-transform: translateX(-50%) scale(1);
    -ms-transform: translateX(-50%) scale(1);
    -o-transform: translateX(-50%) scale(1);
    transform: translateX(-50%) scale(1);
    /* set a rotation to fix bug on Firefox - http://gielberkers.com/how-to-fix-shaking-css-transitions-in-firefox/ */
    -moz-transform: translateX(-50%) scale(1) rotate(0.02deg); }
  .no-touch .cd-vertical-nav:hover a::after,
  .touch .cd-vertical-nav a::after {
    opacity: 1;
    -webkit-transition: -webkit-transform 0.4s, opacity 0s;
    -moz-transition: -moz-transform 0.4s, opacity 0s;
    transition: transform 0.4s, opacity 0s; }
  .no-touch .cd-vertical-nav:hover .label,
  .touch .cd-vertical-nav .label {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0); } }

/* -------------------------------- 

Content Sections - basic style

-------------------------------- */
.cd-section {
  /* vertically align its content*/
  width: 100%;
  height: 100vh; }

/* -------------------------------- 

no-js

-------------------------------- */
.no-js .cd-nav-trigger {
  display: none; }

.no-js .cd-vertical-nav {
  position: static;
  height: auto;
  width: 100%;
  max-width: none;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 0;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1); }

.no-js .cd-vertical-nav::before {
  display: none; }

.no-js .cd-vertical-nav ul::after {
  clear: both;
  content: "";
  display: table; }

.no-js .cd-vertical-nav li {
  display: inline-block;
  float: left; }

.no-js .cd-vertical-nav a {
  padding: 0 1em;
  margin: 1.5em 1em;
  color: #eaf2e3; }

.no-js .cd-vertical-nav a.active {
  color: #c0a672; }

.no-js .cd-vertical-nav a::after,
.no-js .cd-vertical-nav a::before {
  display: none; }

.no-js .cd-vertical-nav .label {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0); }