body {
    height: 50%;
    background: radial-gradient(ellipse at top, #336a8b, #00466d );
    overflow-x: hidden;
}




p{ /* The words and spacing between groups of text */
    margin-top: 1vw;
    font-size: 1.3vw;
}

.cite { 
    font-style: italic; /* Used to make itallic words */
}

.cite2 {
    font-style: italic; /* Used to make green itallic words */
    color: palegreen;
}

.contact { /* The fixed admin@thegreatgatsbytour.com contact information */
    font-size: 1.1vw;
    font-weight: 250;
    letter-spacing: .1vw;
    position: fixed;
    margin-left: 25%;
    bottom: 3vw;
}







/* Navigation Menu on the left******************************************/

.nav__wrapper {
    z-index: 1;
    position: fixed;
    height: 100%;
    padding-left: 8%;
    top: 5%;
}

.nav {
}
.nav__counter {
    
    font-size: 25px;           /* This prevent the left menu from resizing! Don't change to vw */
    -webkit-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
}
.nav__counter__chapter {
    height: 0px;                /* moved the lines width*/
    overflow: hidden;

}
.nav__title {
    font-weight: 300;
    margin-top: 1px;            /* moved the lines width*/
    width: 10vw;                /* moved the words right*/
    height: 0px;                /* moved the lines width*/
    overflow: hidden;
}
.nav__body {
    overflow: hidden;
}

.nav li:after {
    content: '';                /* makes the lines disappear */
    border-left: 2px solid white;
    border-top: 2px solid white;
    height: 2550px;             /*Line height*/
    width: 3vw;                 /* Line width */
    position: absolute;
    left: -4vw;                 /* move the chapter more right */
    top: 15px;                  /* move ONLY lines up and down */
}
.nav li a {
    top: -1vw;
    display: block;
    padding: 0;
    color: #fff;                /* chapter number color */ 
}
.nav li a:hover {
    background-color: transparent;
    padding-left: 1em;          /* how far right the number goes on a hover */
}
.nav li a:focus {
    background-color: transparent;      /* background behind clicked-on chapter */
}
.nav li.active {
    pointer-events: none;
    padding-left: 1vw;          /* how far the details are to the right when clicked on */
}
.nav li.active:after {
    width: 4vw;                 /*length of line coming out when clicked on */ 
    height: 300px;
}
.nav li.active .nav__counter {
    font-size: 4vw;             /* clicked on chapter number size */
}

.nav li.active .nav__counter__chapter {
    font-size: 1.5vw;           /* "chapter" word size, clicked on */
    font-weight: bold;
    margin-bottom: 1vm;         /* distance above chapter number when clicked on */
    overflow: visible;
}
.nav li.active .nav__title {
    width: 4vw;                 /* chapter detail paragraph widths when clicked on */
    margin-left: 3vw;
    overflow: visible;
    font-size: 1.8vw;
}










/* stars *************************************************************/

#layers {
}

#layers .layer {
	background-size: auto 100%;
	background-repeat: repeat-x;
	height: 40vw;
	position: absolute;
	transform: translate3d(0, 0, 0);
	width: 200vw;
    overflow-x:hidden;
    z-index: -1;  /* This makes it go behind the cover */
}

@keyframes twinkle {
	from { opacity: .3; }
	to { opacity: 1; }
}

@keyframes layer-1 {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-689px, 0, 0); }
}
#layers .layer:nth-child(1) {
	animation: twinkle 10s ease-in -5s infinite alternate, layer-1 344s linear infinite;
	background-image: url('http://imgur.com/9beLKl9.png');
}

@keyframes layer-2 {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-699px, 0, 0); }
}
#layers .layer:nth-child(2) {
	animation: twinkle 3s ease-in -3s infinite alternate, layer-2 349s linear infinite;
	background-image: url('http://imgur.com/46MRYFa.png');
}

@keyframes layer-3 {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-699px, 0, 0); }
}
#layers .layer:nth-child(3) {
	animation: twinkle 3.5s ease-in infinite alternate, layer-3 349s linear infinite;
	background-image: url('http://imgur.com/46MRYFa.png');
}

@keyframes layer-4 {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-480px, 0, 0); }
}
#layers .layer:nth-child(4) {
	animation: twinkle 4s ease-in -2s infinite alternate, layer-4 240s linear infinite;
	background-image: url('http://imgur.com/BqkETyl.png');
}

@keyframes layer-5 {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-486px, 0, 0); }
}
#layers .layer:nth-child(5) {
	animation: twinkle 5.5s ease-in infinite alternate, layer-5 243s linear infinite;
	background-image: url('http://imgur.com/x1GB77K.png');
}

@keyframes shooting-star {
	0% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
	5%, 100% {
		opacity: 0;
        transform: translate3d(-270px, 180px, 0);
	}
}

#layers:before {
	animation: 30s linear 1s shooting-star infinite;
	background-image: url('http://imgur.com/ilhrli3.png');
	background-size: 72px 50px;
	content: ' ';
	height: 50px;
	left: 80%;
	position: absolute;
	top: -50px;
	width: 72px;
	z-index: -1; /* This makes the star behind the cover */
}









/* "The Great Gatsby" Parallax Title Words **************************************************/


#title {
    position: absolute;
    margin-top: 5%;
    width: 60vw;
    margin-left: 10vw;
    font-size:  1.9vw;
    font-family: "lato", sans-serif;
    text-align: center;
    color: #FFF;
    letter-spacing: .9vw;
}

#title span {
  background: -webkit-linear-gradient(white, #7692af);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.GatsbyTitle {
   width: 50vw;
}


















/* parallax ********************************************************************/

.parallax {
  -webkit-perspective: 100px;
          perspective: 100px;
    height: 125vw;    /* The size/length of the Parallax window ITSELF */
    overflow-x:hidden;
    overflow-y: auto; 
    position: absolute;
    width: 100%;
    border-bottom: 1vw solid #1a1a1a; 
}

.parallax__layer img {    /* Keeps everything level horizontally */
    display: block;
    position: absolute;
     bottom: 0;
}

.parallaxWiden {
    width: 100vw;
}

.widenMansion {
    width: 75%;
}

.moonWiden {
    width: 10vw;
}

.widenPier {
    width: 85vw;
}

.widenGrass {
    width: 102vw;
}
.parallax__layer__0 {
  -webkit-transform: translateZ(-300px) scale(1);
          transform: translateZ(-300px) scale(1);
        max-width: 100%;
        height: 10vw;
}

.parallax__layer__1 { /* Moon */
  -webkit-transform: translateZ(-250px) scale(3.5);
          transform: translateZ(-250px) scale(3.5);
        margin-left: 130vw;
        margin-top: -100%;
}
 
.parallax__layer__2 { /* House */
  -webkit-transform: translateZ(-200px) scale(3.0);
          transform: translateZ(-200px) scale(3.0);
        margin-top: 143%;
        margin-left: 42vw;
}   

.parallax__layer__3 {  /* Lighthouse */
  -webkit-transform: translateZ(-150px) scale(2.5);
          transform: translateZ(-150px) scale(2.5);
    margin-left: 11%; 
    margin-top: -165%;
}

.parallax__layer__4 { /* Water */
  -webkit-transform: translateZ(-100px) scale(2);
          transform: translateZ(-100px) scale(2);
    position: absolute;
        margin-top: 74%;
        max-width: 100%;
    margin-left: -50%; 

}

.parallax__layer__5 { /* Pier */
  -webkit-transform: translateZ(-50px) scale(1.5);
          transform: translateZ(-50px) scale(1.5);
    position: absolute;
        margin-left: -10%;
        margin-top: 60%;
}

.parallax__layer__6 { /* Grass */
  -webkit-transform: translateZ(0px) scale(1);
          transform: translateZ(0px) scale(1);
    position: absolute;
    width: 102%;
    margin-top: 75%;
}











.fireflies {
  position: relative;
  height: 50vh;
  width: 100%;
}

.firefly {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 0.6vw;
  height: 0.6vw;
  margin: -0.2vw 0 0 9.8vw;
  animation: ease 900s alternate infinite;
  pointer-events: none;
}
.firefly::before, .firefly::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform-origin: -10vw;
}
.firefly::before {
  background: black;
  opacity: 0.4;
  animation: drift ease alternate infinite;
}
.firefly::after {
  background: white;
  opacity: 0;
  box-shadow: 0 0 0vw 0vw yellow;
  animation: drift ease alternate infinite, flash ease infinite;
}

.firefly:nth-child(1) {
  animation-name: move1;
}
.firefly:nth-child(1)::before {
  animation-duration: 24s;
}
.firefly:nth-child(1)::after {
  animation-duration: 24s, 10973ms;
  animation-delay: 0ms, 1633ms;
}

@keyframes move1 {
  0% {
    transform: translateX(8vw) translateY(-22vh) scale(0.53);
  }
  4.347826087% {
    transform: translateX(45vw) translateY(-8vh) scale(0.42);
  }
  8.6956521739% {
    transform: translateX(10vw) translateY(-33vh) scale(0.36);
  }
  13.0434782609% {
    transform: translateX(32vw) translateY(-19vh) scale(0.54);
  }
  17.3913043478% {
    transform: translateX(7vw) translateY(-17vh) scale(0.98);
  }
  21.7391304348% {
    transform: translateX(46vw) translateY(-42vh) scale(0.39);
  }
  26.0869565217% {
    transform: translateX(45vw) translateY(-35vh) scale(0.4);
  }
  30.4347826087% {
    transform: translateX(12vw) translateY(12vh) scale(0.82);
  }
  34.7826086957% {
    transform: translateX(17vw) translateY(38vh) scale(0.98);
  }
  39.1304347826% {
    transform: translateX(10vw) translateY(42vh) scale(0.49);
  }
  43.4782608696% {
    transform: translateX(36vw) translateY(11vh) scale(0.73);
  }
  47.8260869565% {
    transform: translateX(-41vw) translateY(11vh) scale(0.56);
  }
  52.1739130435% {
    transform: translateX(-36vw) translateY(-29vh) scale(0.96);
  }
  56.5217391304% {
    transform: translateX(-44vw) translateY(32vh) scale(0.51);
  }
  60.8695652174% {
    transform: translateX(23vw) translateY(23vh) scale(0.64);
  }
  65.2173913043% {
    transform: translateX(-26vw) translateY(3vh) scale(0.71);
  }
  69.5652173913% {
    transform: translateX(39vw) translateY(-46vh) scale(0.58);
  }
  73.9130434783% {
    transform: translateX(-36vw) translateY(-9vh) scale(0.75);
  }
  78.2608695652% {
    transform: translateX(-26vw) translateY(6vh) scale(0.91);
  }
  82.6086956522% {
    transform: translateX(-12vw) translateY(9vh) scale(0.81);
  }
  86.9565217391% {
    transform: translateX(48vw) translateY(27vh) scale(0.57);
  }
  91.3043478261% {
    transform: translateX(18vw) translateY(-7vh) scale(0.63);
  }
  95.652173913% {
    transform: translateX(7vw) translateY(-28vh) scale(0.82);
  }
  100% {
    transform: translateX(35vw) translateY(-44vh) scale(0.58);
  }
}
.firefly:nth-child(2) {
  animation-name: move2;
}
.firefly:nth-child(2)::before {
  animation-duration: 25s;
}
.firefly:nth-child(2)::after {
  animation-duration: 25s, 7434ms;
  animation-delay: 0ms, 1750ms;
}

@keyframes move2 {
  0% {
    transform: translateX(48vw) translateY(27vh) scale(0.31);
  }
  5.2631578947% {
    transform: translateX(-19vw) translateY(32vh) scale(0.95);
  }
  10.5263157895% {
    transform: translateX(46vw) translateY(-26vh) scale(0.49);
  }
  15.7894736842% {
    transform: translateX(-25vw) translateY(5vh) scale(0.47);
  }
  21.0526315789% {
    transform: translateX(19vw) translateY(-16vh) scale(0.36);
  }
  26.3157894737% {
    transform: translateX(-43vw) translateY(-43vh) scale(0.38);
  }
  31.5789473684% {
    transform: translateX(-25vw) translateY(30vh) scale(0.85);
  }
  36.8421052632% {
    transform: translateX(10vw) translateY(31vh) scale(0.53);
  }
  42.1052631579% {
    transform: translateX(14vw) translateY(38vh) scale(0.75);
  }
  47.3684210526% {
    transform: translateX(-6vw) translateY(45vh) scale(0.93);
  }
  52.6315789474% {
    transform: translateX(-46vw) translateY(49vh) scale(0.58);
  }
  57.8947368421% {
    transform: translateX(-21vw) translateY(-44vh) scale(0.95);
  }
  63.1578947368% {
    transform: translateX(-24vw) translateY(8vh) scale(0.82);
  }
  68.4210526316% {
    transform: translateX(31vw) translateY(13vh) scale(0.8);
  }
  73.6842105263% {
    transform: translateX(37vw) translateY(47vh) scale(0.61);
  }
  78.9473684211% {
    transform: translateX(39vw) translateY(11vh) scale(0.66);
  }
  84.2105263158% {
    transform: translateX(-28vw) translateY(41vh) scale(0.48);
  }
  89.4736842105% {
    transform: translateX(26vw) translateY(-24vh) scale(0.75);
  }
  94.7368421053% {
    transform: translateX(-9vw) translateY(-3vh) scale(0.77);
  }
  100% {
    transform: translateX(-7vw) translateY(-32vh) scale(0.47);
  }
}
.firefly:nth-child(3) {
  animation-name: move3;
}
.firefly:nth-child(3)::before {
  animation-duration: 26s;
}
.firefly:nth-child(3)::after {
  animation-duration: 26s, 7016ms;
  animation-delay: 0ms, 5125ms;
}

@keyframes move3 {
  0% {
    transform: translateX(-28vw) translateY(32vh) scale(0.96);
  }
  5% {
    transform: translateX(-12vw) translateY(-6vh) scale(0.28);
  }
  10% {
    transform: translateX(6vw) translateY(11vh) scale(0.84);
  }
  15% {
    transform: translateX(-40vw) translateY(-11vh) scale(0.8);
  }
  20% {
    transform: translateX(-18vw) translateY(34vh) scale(0.8);
  }
  25% {
    transform: translateX(-1vw) translateY(29vh) scale(0.89);
  }
  30% {
    transform: translateX(-16vw) translateY(-21vh) scale(0.46);
  }
  35% {
    transform: translateX(-47vw) translateY(-30vh) scale(0.6);
  }
  40% {
    transform: translateX(45vw) translateY(46vh) scale(0.33);
  }
  45% {
    transform: translateX(49vw) translateY(34vh) scale(0.83);
  }
  50% {
    transform: translateX(-20vw) translateY(1vh) scale(0.4);
  }
  55% {
    transform: translateX(-13vw) translateY(-10vh) scale(1);
  }
  60% {
    transform: translateX(-15vw) translateY(6vh) scale(0.6);
  }
  65% {
    transform: translateX(-39vw) translateY(21vh) scale(0.96);
  }
  70% {
    transform: translateX(40vw) translateY(-24vh) scale(0.87);
  }
  75% {
    transform: translateX(48vw) translateY(-21vh) scale(0.44);
  }
  80% {
    transform: translateX(-3vw) translateY(-7vh) scale(0.78);
  }
  85% {
    transform: translateX(34vw) translateY(-4vh) scale(0.67);
  }
  90% {
    transform: translateX(-44vw) translateY(-48vh) scale(0.28);
  }
  95% {
    transform: translateX(-47vw) translateY(20vh) scale(0.52);
  }
  100% {
    transform: translateX(-46vw) translateY(37vh) scale(0.36);
  }
}
.firefly:nth-child(4) {
  animation-name: move4;
}
.firefly:nth-child(4)::before {
  animation-duration: 25s;
}
.firefly:nth-child(4)::after {
  animation-duration: 25s, 6413ms;
  animation-delay: 0ms, 2458ms;
}

@keyframes move4 {
  0% {
    transform: translateX(-40vw) translateY(-43vh) scale(0.56);
  }
  3.8461538462% {
    transform: translateX(15vw) translateY(17vh) scale(0.35);
  }
  7.6923076923% {
    transform: translateX(48vw) translateY(2vh) scale(0.74);
  }
  11.5384615385% {
    transform: translateX(50vw) translateY(38vh) scale(0.81);
  }
  15.3846153846% {
    transform: translateX(-28vw) translateY(-13vh) scale(0.6);
  }
  19.2307692308% {
    transform: translateX(-12vw) translateY(37vh) scale(0.28);
  }
  23.0769230769% {
    transform: translateX(-47vw) translateY(-27vh) scale(0.76);
  }
  26.9230769231% {
    transform: translateX(-18vw) translateY(5vh) scale(0.51);
  }
  30.7692307692% {
    transform: translateX(36vw) translateY(-45vh) scale(0.88);
  }
  34.6153846154% {
    transform: translateX(-36vw) translateY(12vh) scale(0.3);
  }
  38.4615384615% {
    transform: translateX(5vw) translateY(-38vh) scale(0.74);
  }
  42.3076923077% {
    transform: translateX(-26vw) translateY(36vh) scale(0.33);
  }
  46.1538461538% {
    transform: translateX(-35vw) translateY(2vh) scale(0.7);
  }
  50% {
    transform: translateX(-3vw) translateY(-12vh) scale(0.31);
  }
  53.8461538462% {
    transform: translateX(22vw) translateY(-45vh) scale(0.64);
  }
  57.6923076923% {
    transform: translateX(43vw) translateY(12vh) scale(0.51);
  }
  61.5384615385% {
    transform: translateX(-16vw) translateY(9vh) scale(0.9);
  }
  65.3846153846% {
    transform: translateX(42vw) translateY(10vh) scale(0.83);
  }
  69.2307692308% {
    transform: translateX(24vw) translateY(28vh) scale(0.51);
  }
  73.0769230769% {
    transform: translateX(37vw) translateY(-20vh) scale(0.9);
  }
  76.9230769231% {
    transform: translateX(16vw) translateY(6vh) scale(0.89);
  }
  80.7692307692% {
    transform: translateX(-34vw) translateY(4vh) scale(0.6);
  }
  84.6153846154% {
    transform: translateX(4vw) translateY(-43vh) scale(0.91);
  }
  88.4615384615% {
    transform: translateX(0vw) translateY(-7vh) scale(0.41);
  }
  92.3076923077% {
    transform: translateX(31vw) translateY(-19vh) scale(0.9);
  }
  96.1538461538% {
    transform: translateX(-4vw) translateY(-37vh) scale(1);
  }
  100% {
    transform: translateX(-48vw) translateY(21vh) scale(1);
  }
}
.firefly:nth-child(5) {
  animation-name: move5;
}
.firefly:nth-child(5)::before {
  animation-duration: 22s;
}
.firefly:nth-child(5)::after {
  animation-duration: 22s, 5799ms;
  animation-delay: 0ms, 2389ms;
}

@keyframes move5 {
  0% {
    transform: translateX(-10vw) translateY(-10vh) scale(0.65);
  }
  5.5555555556% {
    transform: translateX(-4vw) translateY(5vh) scale(0.69);
  }
  11.1111111111% {
    transform: translateX(3vw) translateY(4vh) scale(0.84);
  }
  16.6666666667% {
    transform: translateX(37vw) translateY(39vh) scale(0.47);
  }
  22.2222222222% {
    transform: translateX(8vw) translateY(-45vh) scale(0.47);
  }
  27.7777777778% {
    transform: translateX(-15vw) translateY(19vh) scale(0.93);
  }
  33.3333333333% {
    transform: translateX(4vw) translateY(38vh) scale(0.37);
  }
  38.8888888889% {
    transform: translateX(21vw) translateY(31vh) scale(0.32);
  }
  44.4444444444% {
    transform: translateX(23vw) translateY(-17vh) scale(0.69);
  }
  50% {
    transform: translateX(-49vw) translateY(-29vh) scale(0.76);
  }
  55.5555555556% {
    transform: translateX(-22vw) translateY(14vh) scale(0.37);
  }
  61.1111111111% {
    transform: translateX(6vw) translateY(-43vh) scale(0.6);
  }
  66.6666666667% {
    transform: translateX(14vw) translateY(-11vh) scale(0.62);
  }
  72.2222222222% {
    transform: translateX(-17vw) translateY(43vh) scale(0.5);
  }
  77.7777777778% {
    transform: translateX(-22vw) translateY(47vh) scale(0.51);
  }
  83.3333333333% {
    transform: translateX(-6vw) translateY(19vh) scale(0.26);
  }
  88.8888888889% {
    transform: translateX(-36vw) translateY(35vh) scale(0.86);
  }
  94.4444444444% {
    transform: translateX(43vw) translateY(31vh) scale(0.94);
  }
  100% {
    transform: translateX(8vw) translateY(-30vh) scale(0.9);
  }
}
.firefly:nth-child(6) {
  animation-name: move6;
}
.firefly:nth-child(6)::before {
  animation-duration: 19s;
}
.firefly:nth-child(6)::after {
  animation-duration: 19s, 9168ms;
  animation-delay: 0ms, 2262ms;
}

@keyframes move6 {
  0% {
    transform: translateX(-31vw) translateY(18vh) scale(0.47);
  }
  5.8823529412% {
    transform: translateX(48vw) translateY(38vh) scale(0.75);
  }
  11.7647058824% {
    transform: translateX(12vw) translateY(-22vh) scale(0.46);
  }
  17.6470588235% {
    transform: translateX(-14vw) translateY(19vh) scale(0.6);
  }
  23.5294117647% {
    transform: translateX(-44vw) translateY(9vh) scale(0.87);
  }
  29.4117647059% {
    transform: translateX(-21vw) translateY(-14vh) scale(0.8);
  }
  35.2941176471% {
    transform: translateX(6vw) translateY(29vh) scale(0.91);
  }
  41.1764705882% {
    transform: translateX(12vw) translateY(15vh) scale(0.39);
  }
  47.0588235294% {
    transform: translateX(42vw) translateY(-39vh) scale(0.71);
  }
  52.9411764706% {
    transform: translateX(-26vw) translateY(-31vh) scale(0.26);
  }
  58.8235294118% {
    transform: translateX(-14vw) translateY(-45vh) scale(0.89);
  }
  64.7058823529% {
    transform: translateX(8vw) translateY(-5vh) scale(0.27);
  }
  70.5882352941% {
    transform: translateX(14vw) translateY(48vh) scale(0.7);
  }
  76.4705882353% {
    transform: translateX(35vw) translateY(5vh) scale(0.33);
  }
  82.3529411765% {
    transform: translateX(-1vw) translateY(48vh) scale(0.71);
  }
  88.2352941176% {
    transform: translateX(28vw) translateY(-8vh) scale(0.75);
  }
  94.1176470588% {
    transform: translateX(-41vw) translateY(44vh) scale(0.93);
  }
  100% {
    transform: translateX(26vw) translateY(21vh) scale(0.28);
  }
}
.firefly:nth-child(7) {
  animation-name: move7;
}
.firefly:nth-child(7)::before {
  animation-duration: 28s;
}
.firefly:nth-child(7)::after {
  animation-duration: 28s, 5654ms;
  animation-delay: 0ms, 2526ms;
}

@keyframes move7 {
  0% {
    transform: translateX(10vw) translateY(23vh) scale(0.66);
  }
  4.5454545455% {
    transform: translateX(24vw) translateY(-28vh) scale(0.3);
  }
  9.0909090909% {
    transform: translateX(-41vw) translateY(-17vh) scale(0.34);
  }
  13.6363636364% {
    transform: translateX(3vw) translateY(-20vh) scale(0.36);
  }
  18.1818181818% {
    transform: translateX(37vw) translateY(-8vh) scale(0.46);
  }
  22.7272727273% {
    transform: translateX(-26vw) translateY(-29vh) scale(0.65);
  }
  27.2727272727% {
    transform: translateX(4vw) translateY(-14vh) scale(0.55);
  }
  31.8181818182% {
    transform: translateX(-42vw) translateY(-46vh) scale(0.26);
  }
  36.3636363636% {
    transform: translateX(31vw) translateY(38vh) scale(0.99);
  }
  40.9090909091% {
    transform: translateX(33vw) translateY(-1vh) scale(0.66);
  }
  45.4545454545% {
    transform: translateX(-15vw) translateY(6vh) scale(0.41);
  }
  50% {
    transform: translateX(-14vw) translateY(46vh) scale(0.62);
  }
  54.5454545455% {
    transform: translateX(-40vw) translateY(45vh) scale(0.58);
  }
  59.0909090909% {
    transform: translateX(-16vw) translateY(15vh) scale(0.99);
  }
  63.6363636364% {
    transform: translateX(37vw) translateY(-39vh) scale(0.46);
  }
  68.1818181818% {
    transform: translateX(7vw) translateY(-49vh) scale(0.39);
  }
  72.7272727273% {
    transform: translateX(-24vw) translateY(-31vh) scale(0.59);
  }
  77.2727272727% {
    transform: translateX(14vw) translateY(-13vh) scale(0.93);
  }
  81.8181818182% {
    transform: translateX(1vw) translateY(-15vh) scale(0.79);
  }
  86.3636363636% {
    transform: translateX(-19vw) translateY(-1vh) scale(0.83);
  }
  90.9090909091% {
    transform: translateX(0vw) translateY(12vh) scale(0.8);
  }
  95.4545454545% {
    transform: translateX(-9vw) translateY(-45vh) scale(0.96);
  }
  100% {
    transform: translateX(2vw) translateY(3vh) scale(0.86);
  }
}
.firefly:nth-child(8) {
  animation-name: move8;
}
.firefly:nth-child(8)::before {
  animation-duration: 26s;
}
.firefly:nth-child(8)::after {
  animation-duration: 26s, 10341ms;
  animation-delay: 0ms, 5901ms;
}

@keyframes move8 {
  0% {
    transform: translateX(-33vw) translateY(9vh) scale(0.52);
  }
  4.5454545455% {
    transform: translateX(-44vw) translateY(-5vh) scale(0.83);
  }
  9.0909090909% {
    transform: translateX(32vw) translateY(-48vh) scale(0.78);
  }
  13.6363636364% {
    transform: translateX(-4vw) translateY(-33vh) scale(0.63);
  }
  18.1818181818% {
    transform: translateX(-46vw) translateY(-40vh) scale(0.75);
  }
  22.7272727273% {
    transform: translateX(10vw) translateY(7vh) scale(0.88);
  }
  27.2727272727% {
    transform: translateX(-27vw) translateY(20vh) scale(0.52);
  }
  31.8181818182% {
    transform: translateX(-32vw) translateY(3vh) scale(0.32);
  }
  36.3636363636% {
    transform: translateX(-13vw) translateY(-17vh) scale(0.76);
  }
  40.9090909091% {
    transform: translateX(37vw) translateY(-49vh) scale(0.6);
  }
  45.4545454545% {
    transform: translateX(-37vw) translateY(16vh) scale(0.87);
  }
  50% {
    transform: translateX(-16vw) translateY(-43vh) scale(0.88);
  }
  54.5454545455% {
    transform: translateX(29vw) translateY(-38vh) scale(0.4);
  }
  59.0909090909% {
    transform: translateX(-46vw) translateY(23vh) scale(0.35);
  }
  63.6363636364% {
    transform: translateX(9vw) translateY(-35vh) scale(0.86);
  }
  68.1818181818% {
    transform: translateX(15vw) translateY(31vh) scale(0.4);
  }
  72.7272727273% {
    transform: translateX(42vw) translateY(33vh) scale(0.75);
  }
  77.2727272727% {
    transform: translateX(7vw) translateY(9vh) scale(0.47);
  }
  81.8181818182% {
    transform: translateX(34vw) translateY(-28vh) scale(0.91);
  }
  86.3636363636% {
    transform: translateX(45vw) translateY(20vh) scale(0.52);
  }
  90.9090909091% {
    transform: translateX(42vw) translateY(-45vh) scale(0.69);
  }
  95.4545454545% {
    transform: translateX(-8vw) translateY(-47vh) scale(0.71);
  }
  100% {
    transform: translateX(24vw) translateY(46vh) scale(0.52);
  }
}
.firefly:nth-child(9) {
  animation-name: move9;
}
.firefly:nth-child(9)::before {
  animation-duration: 25s;
}
.firefly:nth-child(9)::after {
  animation-duration: 25s, 7970ms;
  animation-delay: 0ms, 710ms;
}

@keyframes move9 {
  0% {
    transform: translateX(-28vw) translateY(-6vh) scale(0.6);
  }
  3.5714285714% {
    transform: translateX(-37vw) translateY(35vh) scale(0.43);
  }
  7.1428571429% {
    transform: translateX(-27vw) translateY(25vh) scale(0.9);
  }
  10.7142857143% {
    transform: translateX(-40vw) translateY(-36vh) scale(0.64);
  }
  14.2857142857% {
    transform: translateX(-20vw) translateY(27vh) scale(0.52);
  }
  17.8571428571% {
    transform: translateX(-17vw) translateY(-25vh) scale(0.82);
  }
  21.4285714286% {
    transform: translateX(9vw) translateY(-21vh) scale(0.68);
  }
  25% {
    transform: translateX(-22vw) translateY(-26vh) scale(0.48);
  }
  28.5714285714% {
    transform: translateX(45vw) translateY(-19vh) scale(1);
  }
  32.1428571429% {
    transform: translateX(-21vw) translateY(12vh) scale(0.87);
  }
  35.7142857143% {
    transform: translateX(-45vw) translateY(5vh) scale(0.29);
  }
  39.2857142857% {
    transform: translateX(26vw) translateY(40vh) scale(0.82);
  }
  42.8571428571% {
    transform: translateX(39vw) translateY(37vh) scale(0.87);
  }
  46.4285714286% {
    transform: translateX(-14vw) translateY(-33vh) scale(0.57);
  }
  50% {
    transform: translateX(31vw) translateY(-9vh) scale(0.55);
  }
  53.5714285714% {
    transform: translateX(-43vw) translateY(22vh) scale(0.3);
  }
  57.1428571429% {
    transform: translateX(47vw) translateY(24vh) scale(0.67);
  }
  60.7142857143% {
    transform: translateX(-20vw) translateY(46vh) scale(0.88);
  }
  64.2857142857% {
    transform: translateX(45vw) translateY(31vh) scale(0.56);
  }
  67.8571428571% {
    transform: translateX(23vw) translateY(-17vh) scale(0.45);
  }
  71.4285714286% {
    transform: translateX(29vw) translateY(3vh) scale(0.65);
  }
  75% {
    transform: translateX(43vw) translateY(44vh) scale(0.31);
  }
  78.5714285714% {
    transform: translateX(30vw) translateY(32vh) scale(0.57);
  }
  82.1428571429% {
    transform: translateX(-1vw) translateY(-26vh) scale(0.57);
  }
  85.7142857143% {
    transform: translateX(37vw) translateY(-7vh) scale(0.44);
  }
  89.2857142857% {
    transform: translateX(-8vw) translateY(-44vh) scale(0.64);
  }
  92.8571428571% {
    transform: translateX(-9vw) translateY(26vh) scale(0.37);
  }
  96.4285714286% {
    transform: translateX(14vw) translateY(-22vh) scale(0.35);
  }
  100% {
    transform: translateX(-19vw) translateY(2vh) scale(0.86);
  }
}
.firefly:nth-child(10) {
  animation-name: move10;
}
.firefly:nth-child(10)::before {
  animation-duration: 27s;
}
.firefly:nth-child(10)::after {
  animation-duration: 27s, 5743ms;
  animation-delay: 0ms, 4345ms;
}

@keyframes move10 {
  0% {
    transform: translateX(-6vw) translateY(-27vh) scale(0.52);
  }
  5.2631578947% {
    transform: translateX(20vw) translateY(3vh) scale(0.26);
  }
  10.5263157895% {
    transform: translateX(5vw) translateY(-21vh) scale(0.47);
  }
  15.7894736842% {
    transform: translateX(-10vw) translateY(29vh) scale(0.82);
  }
  21.0526315789% {
    transform: translateX(20vw) translateY(-10vh) scale(0.42);
  }
  26.3157894737% {
    transform: translateX(9vw) translateY(40vh) scale(0.93);
  }
  31.5789473684% {
    transform: translateX(47vw) translateY(30vh) scale(0.5);
  }
  36.8421052632% {
    transform: translateX(30vw) translateY(34vh) scale(0.94);
  }
  42.1052631579% {
    transform: translateX(-11vw) translateY(-29vh) scale(0.49);
  }
  47.3684210526% {
    transform: translateX(37vw) translateY(-39vh) scale(0.29);
  }
  52.6315789474% {
    transform: translateX(-12vw) translateY(37vh) scale(0.54);
  }
  57.8947368421% {
    transform: translateX(47vw) translateY(-24vh) scale(0.68);
  }
  63.1578947368% {
    transform: translateX(20vw) translateY(18vh) scale(0.32);
  }
  68.4210526316% {
    transform: translateX(-4vw) translateY(-46vh) scale(0.62);
  }
  73.6842105263% {
    transform: translateX(3vw) translateY(2vh) scale(0.32);
  }
  78.9473684211% {
    transform: translateX(5vw) translateY(12vh) scale(0.83);
  }
  84.2105263158% {
    transform: translateX(11vw) translateY(-1vh) scale(0.37);
  }
  89.4736842105% {
    transform: translateX(0vw) translateY(10vh) scale(0.8);
  }
  94.7368421053% {
    transform: translateX(-13vw) translateY(1vh) scale(0.48);
  }
  100% {
    transform: translateX(43vw) translateY(-7vh) scale(0.6);
  }
}
@keyframes drift {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes flash {
  0%, 30%, 100% {
    opacity: 0;
    box-shadow: 0 0 0vw 0vw yellow;
  }
  5% {
    opacity: 1;
    box-shadow: 0 0 2vw 0.4vw yellow;
  }
}







a {
    font-size: .1vw;
}

.parallax__cover {
    background: #000000;
    display: block;
    position: absolute;
    width: 100%;
    height: 135vw;  /* what pushes down the top banner */
    margin-top: 60%;

}

.lighthouse {
    margin: 0 auto;
    width: 250px;
    position: relative;
    display: block;
}

.lightAnimation {
    position: absolute;
    top: -5vw; /* move lighthouse up or down */
      /* move lightout right or left */
    height: 5px;
    border-radius: 100%;
  -webkit-animation: glow 3s ease infinite;
          animation: glow 3s ease infinite;
}


@keyframes glow {
  0% {
    left: 119px;
    width: 0px;
    background-color: #fff;
  }
  16.5% {
    background-color: #fff;
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.75);
  }
  33.3% {
    left: 113px;
    width: 3px;
    background-color: #51e831;
    box-shadow: 0px 0px 15px 20px #d5ffcc;
  }
  50% {
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.75);
  }
  66.6% {
    left: 109px;
    width: 0px;
    background-color: #fff;
  }
}
















/* parallax intro paragraph *******************************************************/



.introductionDivFrame {
    position: relative;
    top: 10vw;
    margin-left: 20%; /* move the frame */ 
}

.card-body-locations {
    margin-top: 1vw;
}


.frame {
    width: 65vw;
    height: 52vw
}

.introductionDivWords {
    position: absolute;
    top: 17%;
    left: 7.5%;                   /* move words to the right */
    background-color: transparent;
    max-width: 65%;
    max-height: 70%;
}
.introduction {
    text-indent: 30px;
    font-size: 1.6vw;
    text-align: justify;
    font-family: 'Poiret One', cursive;
    color: #ebebeb;
}






.menuGlowWords {
    margin-left: 17%;
    margin-top: -25%;
    width: 70%;
    display: grid;
    background-color: transparent;
    font-family: monospace;
    font-size: 3vw;
}

.glowWords{
    margin-top: -2%;            /* move glow words up */
    font-size: 3vw;
    text-align: center;
    color: #ebebeb;
}

.menuGlowWordsText {
    font-family: 'Poiret One', cursive;
    grid-column: 1;
    grid-row: 1;
   /*     width: 95%;
    height: 30%; */
     text-shadow: 0px 0px 6px rgba(34,148,0,100); /* makes the shadow really show */

}

.menuGlowWordsText.menu-glow {
    filter: blur(.1vw);
    background-color: #3bff00;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: glowingText 3s infinite alternate;
}


@keyframes glowingText {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}



/* Glowing Words *****************************************************/
.locationsWords{
    margin-top: -2%;            /* move glow words up */
    font-size: 2.5vw;
    text-align: center;
    color: #ebebeb;
}

.card {
    position: relative;
    display: grid;
    place-items: center;
    background-color: #18181b;
}

.card-body-locations {
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    display: grid;
    background-color: transparent;
    font-family: monospace;
}


.locationWordsText {
    font-family: 'Poiret One', cursive;
    grid-column: 1;
    grid-row: 1;
   /*     width: 95%;
    height: 30%; */
     text-shadow: 0px 0px 6px rgba(34,148,0,100); /* makes the shadow really show */

}

.locationWordsText.text-glow {
    
    filter: blur(.1vw);
    background-color: #3bff00;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: glowingText 2s infinite alternate;
}


@keyframes glowingText {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}











/* PDF Pamphlet Button ************************************/


.main {
    display: flex;
    margin-top: 20%;
    margin-left: 6%;
    justify-content: center;
    align-items: center;
}

.button {
    font-family: 'Poiret One', cursive;
    font-weight: bold;
    letter-spacing: 0.1em;
    font-size: 1.6em;
    position: relative;
    text-decoration: none;
    padding: 0.3em;
    box-shadow: inset 0 0 0 2px #FDFDFD;
    text-align: center;
    text-decoration:none;
}
.button__label {
  display: block;
  background-color: transparent;
  color: #FDFDFD;
  padding: 1.2em 1.5em;
  transition: color 500ms ease, background-color 500ms ease;
}
.button:hover .button__label, .button:focus .button__label {
    text-decoration:none;
  color: #000;
  background-color: rgba(200, 200, 200, 0.9);
}

a:hover {
text-decoration: none;
}

.button__ornament {
  position: absolute;
}
.button__ornament--vertical {
  top: -0.5em;
  bottom: -0.5em;
  left: 0;
  right: 0;
}
.button__ornament--horisontal {
  left: -0.5em;
  right: -0.5em;
  top: 0;
  bottom: 0;
}
.button__ornament-top-bottom, .button__ornament-left-right {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.button__ornament-top-bottom:before, .button__ornament-top-bottom:after, .button__ornament-left-right:before, .button__ornament-left-right:after {
  content: "";
  position: absolute;
  background-color: #CBCBCB;
  transition: transform 400ms cubic-bezier(0.54, 0.06, 0.39, 0.96);
}
.button__ornament-top-bottom:before, .button__ornament-top-bottom:after {
  height: 1px;
  left: 0;
  right: 0;
}
.button__ornament-top-bottom:before {
  top: 0;
}
.button__ornament-top-bottom:after {
  bottom: 0;
}
.button__ornament-left-right:before, .button__ornament-left-right:after {
  width: 1px;
  top: 0;
  bottom: 0;
}
.button__ornament-left-right:before {
  left: 0;
}
.button__ornament-left-right:after {
  right: 0;
}
.button:hover .button__ornament-left-right:before, .button:hover .button__ornament-left-right:after, .button:focus .button__ornament-left-right:before, .button:focus .button__ornament-left-right:after {
  transform: scale(1, 0);
}
.button:hover .button__ornament-top-bottom:before, .button:hover .button__ornament-top-bottom:after, .button:focus .button__ornament-top-bottom:before, .button:focus .button__ornament-top-bottom:after {
  transform: scale(0, 1);
}









/* Lesson Plans Section*******************************/
.lessons {
     flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;
    padding-left: 40%;
   /* border: 10px solid red; */
    padding-bottom: 5%;
    color: darkgrey;
}
.lessonsLinks {
font-size: 2vw;
    color: darkgrey;
    color: mediumseagreen;
    font-weight: 300;
}

.lessonsTitle {
    padding-top: 13%;
    font-size: 2.5vw;
}

.lessonsLinks:hover {
    text-decoration: underline;
    color: green;
}



/* Title Banners*******************************/

.titleBanners{
    background-color: #010101;
    border-top: 10px solid #000000;
    border-bottom: 10px solid #000000;
    position: -webkit-sticky;
}


.titleBannerContents {
    margin-left: 18%;
    padding: 14%;
}

.titleBannerCity{
    font-size: 5vw;
    font-family: 'Homenaje', sans-serif;
}

.titleBannerCityPart{
    font-size: 2.5vw;
    margin-top: -30px;
}

#titleBanner1 {
    background-repeat: no-repeat;
    background-attachment: absolute;
    background-size: 100% 100%;
    background-image: url('sectionPhotos/Minnesota4.jpg');

}

#titleBanner1b {
    background-repeat: no-repeat;
    background-attachment: absolute;
    background-size: 100% 100%;

}

#titleBanner1c {
    background-repeat: no-repeat;
    background-attachment: absolute;
    background-size: 100% 100%;
}

#titleBanner1d {
    background-repeat: no-repeat;
    background-attachment: absolute;
    background-size: 100% 100%;
}

#titleBanner2 {
    background-repeat: no-repeat;
    background-attachment: absolute;
    background-size: 100% 100%;

}

#titleBanner2b {
    background-repeat: no-repeat;
    background-attachment: absolute;
    background-size: 100% 100%;
}

#titleBanner3 {
    background-repeat: no-repeat;
    background-attachment: absolute;
    background-size: 100% 100%;
}

#titleBanner4 {
    background-repeat: no-repeat;
    background-attachment: absolute;
    background-size: 100% 100%;
}

#titleBanner5 {
    background-repeat: no-repeat;
    background-attachment: absolute;
    background-size: 100% 100%;
}

#titleBanner6 {
    background-repeat: no-repeat;
    background-attachment: absolute;
    background-size: 100% 100%;
}

#titleBanner7 {
    background-repeat: no-repeat;
    background-attachment: absolute;
    background-size: 100% 100%;
}

#titleBanner8 {
    background-repeat: no-repeat;
    background-attachment: absolute;
    background-size: 100% 100%;
}

#titleBanner9 {
    background-repeat: no-repeat;
    background-attachment: absolute;
    background-size: 100% 100%;
}

#titleBanner9b {
    background-repeat: no-repeat;
    background-attachment: absolute;
    background-size: 100% 100%;
}

#titleBanner9c {
    background-repeat: no-repeat;
    background-attachment: absolute;
    background-size: 100% 100%;
}








/* Sections backgrounds ****************************/


#section1 {
    background-image: url('sectionPhotos/deco8.jpg');
    background-size: 40vw;
    background-attachment: fixed;
}

#section2 {
    background-image: url('sectionPhotos/deco9.jpg');
    background-size: 35vw;
    background-attachment: fixed;
}

#section3 {
    background-image: url('sectionPhotos/deco10.jpg');
    background-attachment: fixed;
    background-size: 35vw;
}

#section4 {
    background-image: url('sectionPhotos/deco5.jpg');
    background-attachment: fixed;
    background-size: 25vw;
}

#section5 {
    background-image: url('sectionPhotos/deco4.jpg');
    background-attachment: fixed;
    background-size: 25vw;
}

#section6 {
    background-image: url('sectionPhotos/deco3.jpg');
    background-attachment: fixed;
    background-size: 30vw;
}

#section7 {
    background-image: url('sectionPhotos/deco8.jpg');
    background-attachment: fixed;
    background-size: 40vw;
}

#section8 {
    background-image: url('sectionPhotos/deco9.jpg');
    background-attachment: fixed;
    background-size: 35vw;
}

#section9 {
    background-image: url('sectionPhotos/deco10.jpg');
    background-attachment: fixed;
    background-size: 35vw;
}













/* Sections ***********************************************/


.wrapper {    /* Where is the end?????????????*/
  font-family: 'Roboto Slab', serif;
  font-weight: 100;
  color: #fff;
  position: relative;   
    overflow-x:hidden;
}

.sections{
    display: inline-block;
    width: 100%;
    margin-top: 115vw; /* How far the Parallax Window is from where SECTIONS begin - this moves the sections up and down */
    overflow-x:hidden;
}

.grouping {
    width: 90vw;
    top: 50%;
    padding-bottom: 5%;
    margin-top: 16%;
    margin-bottom: 14%;
    margin-left: 16%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.map {
    width: 100%;
    border: 2px solid black;
    align-self: center;
    -webkit-box-shadow: -1px 1px 50px 10px rgba(0,0,0,1); 
    box-shadow: -1px 1px 50px 10px rgba(0,0,0,1);
    max-width: 30vw;
    max-height: 50vw;
    width: auto;   /* Tells the photo to not change ratio when it reaches max height/width */
    height: auto;
}

.wordBox {
    border: 3px solid black;
    align-self: center;         /* makes wordbox adjust height */
    background-color: #212121;
    max-height: 35vw;
    max-width: 30vw;
    overflow-y: auto;  
    text-indent: 2vw;
    text-align: justify;
    float: right;
    margin-left: 3vw;            /* moves maps */
    margin-right: 12%;          /* moves word box groups from the right */
    padding: 2%;  
    -webkit-box-shadow: -1px 1px 50px 10px rgba(0,0,0,0.9); 
    box-shadow: -1px 1px 50px 10px rgba(0,0,0,.95);
}

.step {
    text-indent: 0px;
/* font-weight: bold; */
    font-size: 2.6vw;
    margin-left: 10px;
    
}
.smallDate {
    display: inline-block;
    font-size: 1.5vw;
    margin-left: 4%;
}



/* "Scroll Down" Glowing Words ****************************************/



.card {
    position: relative;
    display: grid;
    place-items: center;
    background-color: #18181b;
}

.card-body-scroll {
    display: grid;
    background-color: #212121;  
    height: 40px;
    margin-bottom: 10%;
}

.scrollWordsText {
    text-indent: 2vw;
    letter-spacing: .5vw;
    font-size: 1.8vw;
    font-weight: 300;
    color: goldenrod;
    text-shadow: 0px 0px 6px rgba(218,165,32,100); /* makes the shadow really show */
    width: 95%;
    height: 30%;
    grid-column: 1;
    grid-row: 1;
}

.scrollWordsText.text-glow {
    font-weight: 400;
    background-color: #daa520;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: glowingText 1.5s infinite alternate;
}


@keyframes glowingText {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}


















/* The Final Tour Step, Above the glowing paragraph *************/ 
.finalGrouping {
    width: 90vw;
    top: 50%;
    padding-bottom: 10%;
    margin-top: 16%;
    margin-left: 16%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}



.finalWordBox {
    max-height: 35vw;
    max-width: 30vw;
    text-indent: 30px;
    background-color: #212121;
    overflow-y: auto;  
    font-size: 20px;
    text-align: justify;
    border: 3px solid black;
    margin-left: 5%;
    margin-right: 10%;
    padding: 2%;
    -webkit-box-shadow: -1px 1px 50px 10px rgba(0,0,0,0.9); 
    box-shadow: -1px 1px 50px 10px rgba(0,0,0,0.9);
}











/* The End Glowing Box *********************/

.container {
    display: grid;
    place-items: center;
    height: 90vh; /* area all around the box */
    padding-bottom: 10%;
}

.card {
    position: relative;
    background-color: #212121;
    -webkit-box-shadow: -1px 1px 50px 10px rgba(0,0,0,0.9); 
    box-shadow: -1px 1px 50px 10px rgba(0,0,0,.95);
}

.card-body {
    z-index: 2;
    display: grid;
    width: 35vw;
    height: 36vw;
    background-color: #18181b;
    text-indent: 30px;
    font-family: monospace;
    font-family: 'Special Elite', cursive;
    text-align: justify;
}

.card-glow {
    position: absolute;
    top: 2;
    left: 2;
    width: 35vw;
    height: 36vw;
    background-color: #5dfa9e;
    opacity: .4;
    filter: blur(5vw);
    z-index: 1;
    animation: glowingShadow 2.3s ease infinite alternate;
    overflow: hidden;
}

.indent {
    margin-top: 3%;
}

.theEndText { /* all the paragraphs and words */
    grid-column: 1;
    grid-row: 1;
    font-size: 1.3vw;
    line-height: 3.5vw;
    padding: 7%;
}

.theEnd{ /* the literal words */
    text-indent: 0px;
    margin-top: 1%;
    font-size: 2vw;
    text-align: center;
}


.theEndText.text-glow {
    background-color: #60ff7d;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: glowingText 2.3s infinite alternate;
}

@keyframes glowingShadow {
  from {
    transform: scale(1.2);
  }

  to {
    transform: scale(0.65);
  }
}

@keyframes glowingText {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}







/* Smaller Screens ********************************/
@media screen and (max-width: 700px) {
    
    .frame {
        visibility: hidden;
        height: 105vw;
        width: 70vw;
}
    
    .introduction {
        font-size: 2.9vw;
        line-height: 4.5vw;
    }
    .introductionDivWords {
        left: 0%;   
        top: 0%;
        max-width: 80%;
        max-height: 70%;
    }
    .locationsWords {
        margin-top: 10%;
        font-size: 5vw;
    }
    .card-body-locations {
        width: 120%;
        margin-left: -8%;
    }
    

    
    .titleBannerCityPart{
        font-size: 3vw;
        margin-top: -20px;
        font-weight: 400;
}
    
    .smallDate {
        font-size: 2.5vw; 
}
    .step {
        font-size: 3.5vw;
    }
    p {
        font-size: 2.1vw;
    }
    .map {
        max-width: 40vw;
        max-height: 50vw;
}
    .wordBox {
        max-height: 70vw;
        max-width: 40vw;
    }
    
    .finalWordBox {
        max-height: 70vw;
        max-width: 40vw;
}
    .scrollWordsText {
        font-size: 2.5vw;
        letter-spacing: .1vw;
    }
    .container {
        margin-top: -5%;
        margin-left: 10%;
        margin-bottom: 5%;
    }

    .nav li.active .nav__counter__chapter {
        font-size: 2.5vw;  /* "chapter" word size, clicked on */

}
    .contact {
        font-size: 1.5vw;
        font-weight: 200;
        letter-spacing: .1vw;
        margin-left: 20%;
        bottom: 5vw;
}
    
    @keyframes glowingShadow { /* final green glow */
  from {
    transform: scale(1.7);
  }

  to {
    transform: scale(0.65);
  }
}
    
    
    @keyframes glow {

  16.5% {

    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0);
  }
  33.3% {
    left: 113px;
    width: 3px;
    background-color: #51e831;
    box-shadow: 0px 0px 15px 20px #d5ffcc;
  }
  50% {
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0);
  }
  66.6% {
    left: 109px;
    width: 0px;

  }
}
    
    /* stars ****/
    #layers .layer {
	height: 53vw;   /* changes the height/size of the stars */
	width: 200vw;
}
    
    .parallax {
    height: 200vw;    /* The size/length of the Parallax window */

}
    
    .sections{
    margin-top: 200vw; /* How far the Parallax Window is from where SECTIONS begin - this moves the sections up and down */
}
    
    #title {
    margin-top: 25vw;
}
    
    .fireflies {
        margin-bottom: -25vw;
}

.firefly {

  width: 1vw;
  height: 1vw;
  margin: -0.2vw 0 0 9.8vw;
  animation: ease 1000s alternate infinite;
  pointer-events: none;
}

    .fireflies {
  position: relative;
  height: 10vh;
  width: 100%;
}
    
  
    .parallax__layer__1 { /* Moon */
        margin-left: 120vw;
        margin-top: -140%;
}
    
    .parallax__layer__2 { /* House */
        margin-top: 205%;
        margin-left: 42%;
}   

    
    .parallax__layer__3 {  /* Lighthouse */
    margin-left: 22%; 
    margin-top: -175%;
}

    .parallax__layer__4 { /* Water */
        margin-top: 70%;

    }
    
    .parallax__layer__5 { /* Pier */
    margin-top: 54%;
    margin-left: -9%;
    }
    .parallax__layer__6 { /* Grass */
    margin-top: 70%;
}
    
    .parallax__cover {
    margin-top: 50%;
 height: 175vw;
}
    
        .menuGlowWords {
    margin-left: 17%;
    margin-top: 25%;
}
    

.glowWords{
    font-size: 3.5vw;
}

    
    /* Lesson Plans Section*******************************/
.lessons {
     flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20%;
   /* border: 10px solid red; */
    padding-bottom: 5%;
    color: darkgrey;
    background-color: black;
}
.lessonsLinks {
font-size: 4vw;
}

.lessonsTitle {
    padding-top: 13%;
    font-size:3.5vw;
}


    
.nav li.active .nav__title {
    width: 4vw; /* chapter detail paragraph widths when clicked on */
    margin-left: 3.5vw;
    font-size: 2.5vw;
    letter-spacing: .1vw;
    font-weight: 500;
}
    
    .nav__wrapper {
   /*  top: 25%; */
}
    
    #titleBanner1 {
    background-repeat: no-repeat;
    background-attachment: absolute;
    background-size: 100% 120%;
}
    #titleBanner1b {
    background-repeat: no-repeat;
    background-attachment: absolute;
    background-size: 100% 101%;
}
    
    #titleBanner1c {
    background-repeat: no-repeat;
    background-attachment: absolute;
    filter: brightness(95%);
}

    #titleBanner1d {
    background-repeat: no-repeat;
    background-attachment: absolute;
    background-size: 100% 130%;
}
    
    #titleBanner2 {
    background-repeat: no-repeat;
    background-attachment: absolute;
    background-size: 120% 170%;
}
    
    #titleBanner2b {
    background-repeat: no-repeat;
    background-attachment: absolute;
    background-size: 100% 120%;
}
    
    #titleBanner3 {
    background-repeat: no-repeat;
    background-attachment: absolute;
    background-size: 100% 120%;
}
    #titleBanner4 {
    background-repeat: no-repeat;
    background-attachment: absolute;
}
    #titleBanner5 {
    background-repeat: no-repeat;
    background-attachment: absolute;
}
    
    #titleBanner6 {
    background-repeat: no-repeat;
    background-attachment: absolute;
    background-size: 100% 120%;
}
    
    #titleBanner7 {
    background-repeat: no-repeat;
    background-attachment: absolute;
    background-size: 100% 130%;
}
    #titleBanner8 {
    background-repeat: no-repeat;
    background-attachment: absolute;
}
    
    #titleBanner9 {
    background-repeat: no-repeat;
    background-attachment: absolute;
}
    
    #titleBanner9b {
    background-repeat: no-repeat;
    background-attachment: absolute;
    background-size: 110% 105%;
}
    
    #titleBanner9c {
    background-repeat: no-repeat;
    background-attachment: absolute;
}
    
    
    .card-body-scroll {
    margin-bottom: 3%;
}
    
    
    
    .button {
    margin-top: 0%; /* moves the PDF pamphet button up and down */
  letter-spacing: 0.075em;
  font-size: .75em;
  box-shadow: inset 0 0 0 1px #FDFDFD;

}
    
    .main {
margin-top: 25%;
    margin-left: 6%;
}
    
    .button:hover .button__label, .button:focus .button__label {
  color: #000;
  background-color: rgba(200, 200, 200, 0.8);
}
    
    .button__label {

  padding: .5em 1em;

}
    
    
.container {
    height: 80vh; /* area all around the box */
    padding-bottom: 0%;
}
    
    .card-body {
    width: 60vw;
    height: 96vw;
}

.card-glow {
    width: 60vw;
    height: 76vw;
}

.theEndText { /* all the paragraphs and words */
    font-size: 3.5vw;
    line-height: 6vw;
    padding: 7%;
}

.theEnd{ /* the literal words */
    margin-top: 8%;
    font-size: 5.5vw;
}

    
}