@charset "UTF-8";

* {
  box-sizing: border-box;
}
body {
  background-size: 100vw;

	text-align: center;
	margin: auto;
}



h1 {font-family: 'Saira Stencil One',sans-serif;

  font-size: 6.5vw;
  letter-spacing: .4vw;
text-shadow: 5px 5px 3px black;
color: white;
text-align: center;
padding: 5px;
width: 100vw;
}

/* ASIDE BOXES CLASS WITH MODAL TEXT STYLING --------------------------MODAL  TEXT STYLE--- */
.asideBox {
  display: flex;
  flex-direction: column;
    justify-content:center;
         align-items:center;
     margin: auto;
     height: 40.5vw;
     width: 100%;
     z-index: 3000;
}

.modalText {font-family: 'Saira Stencil One',sans-serif;

  font-size: 2.5vw;
  letter-spacing: .4vw;
text-shadow: 5px 5px 3px black;
color: white;
text-align: center;
padding: 5px;
width: 100%;
}
.modalTextbody {    font-family: 'Oxygen', sans-serif;
    font-weight: 300;
    font-size: 1.5vw;
    color: white;
}
/* ASIDE BOXES CLASS WITH MODAL TEXT STYLING --------------------------MODAL  TEXT STYLE--- */


img {
  overflow: hidden;
}

a:hover {
	color:white;
	font-size:1em;
	text-align: center;
		text-shadow: 0px 0px 10px lightgray;
}


.thumbnails {
  display: flex;
  flex-direction: row;
    justify-content: space-between;
     align-items: flex-start;
     margin: auto;

}
.goodbyeThumbnail {
     margin: auto;
  text-align: center;
}
.thumbpic{
  width: 16vw;
     margin: auto;
}
.thumbtext {
  display: flex;
  flex-direction: row;
    justify-content: space-between;
    /* align-items: stretch;
    align-content: stretch; */
     flex-wrap: nowrap;
}
.thumbwords{
  width: 16vw;
       /* height: 15vw; */
  font-family: 'Oxygen', sans-serif;
  font-weight: 300;
  font-size: 2vw;
  color: white;
  background: rgba(0,0,0,0.85);
  padding: 10px;
  margin: auto;
/* align-content: stretch; */
}
#backgroundsMach {
	background-image: url("images/fssMach_bk.jpg");
  background-size: 100vw;
	text-align: center;
	margin: auto;
}

.backGroundDiv {
  background-color: black;
  margin:auto;
	text-align: center;
}
.items {
  display: grid;
  align-content: stretch;
  justify-content: space-around;
  min-width: 600px;
min-height: 100vh;
  grid-template-columns: 14vw  18vw  18vw  18vw  18vw 14vw;
  grid-template-rows: auto;
  margin: auto;
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
.topBox {
  font-family: 'Saira Stencil One',sans-serif;
    font-size: 3vw;
	text-shadow: 3px 3px 3px black;
  color: white;
  text-align: center;
  padding: 5px;
  width: 72vw;
  margin: auto;
  grid-area: 1/2/2/6;
  /* row 1 - 2, column 2 -6 */
}

#topTit{
  position: absolute;
  top:20vw;
  padding: 5px;
    text-align: center;
  width: 72vw;
  margin: auto;
  grid-area: 1/2/2/6;
  /* row 1 - 2, column 2 -6 */
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
#spaceBox1 {
  width: 100vw;
    height: 40vw;
  margin: auto;
  grid-area: 2/1/3/7;
}
@supports (-webkit-text-stroke: 1px black) {
#spaceBox1 {
  -webkit-text-stroke: 1px black;
  -webkit-text-fill-color: white;
}
  /* row 2 - 3, column 1 -7 ie full width */
}
#actionMan {
  position: absolute;
  left: 2%;
  top: 30vw;
  animation-name: amDancing;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  z-index: 4;
}
@keyframes amDancing {
  0% {left: 2vw;
  }
  50% {left: 60vw;
  }
  100% {left: 2vw;
  }
}
#jeepBox {
  position: absolute;
  left: 2vw;
  top: 45vw;
  animation-name: jeep;
  animation-duration: 5s;
  animation-delay: 3s;
  animation-iteration-count: infinite;
  z-index: 1;
}
@keyframes jeep {
  0% {left: 2vw;
    top: 45vw;
      transform:rotateY(0deg);
  }
  49% {
      transform:rotateY(0deg);
  }
  50% {left: 58vw;
    top: 35vw;
      transform:rotateY(180deg);
  }
  99% {
      transform:rotateY(180deg);
  }
  100% {left: 2vw;
    top: 45vw;
      transform:rotateY(0deg);
  }
}

#copterBox {
  position: absolute;
  left: 70vw;
  top: 40vw;
  animation-name: copter;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  z-index: 1;
}
@keyframes copter {
  0% {left: 70vw;
      top: 40vw;
    position: absolute;
    transform: scale(1) rotate(-20deg);
  }
  20% {
      top: 30vw;
    transform: scale(.5)rotate(-50deg);
  }
  50% {left: 10vw;
      top: 30vw;
    position: absolute;
    transform: scale(1)rotate(5deg);
  }
  75% {
      top: 30vw;
    transform: scale(1.3)rotate(10deg);
  }
  100% {left: 70vw;
      top: 40vw;
    position: absolute;
    transform: scale(1)rotate(-10deg);
  }
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
#tit1{
  font-family: 'Saira Stencil One',sans-serif;
    font-size: 3vw;
  text-shadow: 3px 3px 3px black;
  color: white;
  text-align: center;
  padding: 5px;
  width: 72vw;
}
.vidBox1 {
  width: 72vw;
  margin: auto;
  grid-area: 3/2/4/6;
  /* row 3 - 4, column 2 -6 */
      z-index: 4;
}
/* make the video content responsive */
#videoID1{
width:100%; height: 100%; position: relative;
}

#aside1L{
  position: absolute;
  top: 74vw;
  left:2vw;
  grid-area: 3/1/4/2;
  /* row 3 - 4, column 1 -2 */
  text-align: center;
    margin: auto;
      z-index:3000;
}
#aside1R{
  position: absolute;
  top: 74vw;
right:2vw;
  grid-area: 3/6/4/7;
  /* row 3 - 4, column 6 -7 */
  text-align: center;
    margin: auto;
      z-index: 3000;
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
#spaceBox2 {
  font-family: 'Saira Stencil One',sans-serif;
  font-size: 3vw;
	text-shadow: 3px 3px 3px black;
  color: white;
  text-align: center;
  padding: 5px;
  width: 100vw;
    height: 32vw;
  margin: auto;
  grid-area: 4/1/5/7;
  /* row 4 - 5, column 1 -7 ie full width */
}
#copBox{
  position: absolute;
  top: 148vw;
  left: 40vw;
      z-index: 1;
}
#collage1Box{
  position: absolute;
  top: 150vw;
  left: 70vw;
        z-index: 1;
}
#collage2Box{
  position: absolute;
  top: 142vw;
  left: 10vw;
        z-index: 1;
}
#tankLRBox {
  position: absolute;
  left: 2vw;
  top: 160vw;
  animation-name: tank;
  animation-duration: 9s;
  animation-delay: 3s;
  animation-iteration-count: infinite;
  z-index: 1;
}
@keyframes tank {
  0% {left: 2vw;
    top: 160vw;
      transform:rotateY(0deg);
  }
  49% {
      transform:rotateY(0deg);
  }
  50% {left: 58vw;
    top: 160vw;
      transform:rotateY(180deg);
  }
  99% {
      transform:rotateY(180deg);
  }
  100% {left: 2vw;
    top: 160vw;
      transform:rotateY(0deg);
  }
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
#tit2{
  font-family: 'Saira Stencil One',sans-serif;
    font-size: 3vw;
  text-shadow: 3px 3px 3px black;
  color: white;
  text-align: center;
  padding: 5px;
  width: 72vw;
}
.vidBox2 {
  width: 72vw;
  margin: auto;
  grid-area: 5/2/6/6;
  /* row 5 - 6, column 2 -6 */
      z-index: 4;
}
/* make the video content responsive */
#videoID2{
width:100%; height: 100%; position: relative;
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
#spaceBox3 {
  font-family: 'Saira Stencil One',sans-serif;
    font-size: 3vw;
	text-shadow: 3px 3px 3px black;
  color: white;
  text-align: center;
  padding: 5px;
  width: 100vw;
    height: 32vw;
  margin: auto;
  grid-area: 6/1/7/7;
  /* row 6 - 7, column 1 -7 ie full width */
}
#taClimbBox {
  position: absolute;
  left: 40vw;
  top: 290vw;
  animation-name: taClimb;
  animation-duration: 26s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform: scale(1);
  z-index: 1;
}
@keyframes taClimb {
  0% {left: 40vw;
      top: 290vw;
    position: absolute;
      opacity: 0;
        transform: scale(1);
  }
  10% {opacity: 1;
  }
  90% {opacity: 1;
  }
  100% {left: 45vw;
      top:200vw;
    position: absolute;
    opacity: 0;
          transform: scale(.3);
  }
}
#taCrawlBox {
  position: absolute;
  left: 60vw;
  top: 277vw;
    opacity: 0;
  animation-name: taCrawl;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: 3s;
  z-index: 5;
}
@keyframes taCrawl {
  0% {left: 60vw;
      top: 277vw;
    position: absolute;
      opacity: 0;
  }
  10% {opacity: 1;
  }
  90% {opacity: 1;
  }
  100% {left: 0vw;
      top: 277vw;
    position: absolute;
    opacity: 0;
  }
}

#dCrawlBox {
  position: absolute;
  left: 60vw;
  top: 270vw;
  animation-name: dCrawl;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  z-index: 2;
}
@keyframes dCrawl {
  0% {left: 60vw;
      top: 270vw;
    position: absolute;
    transform: scale(1)rotate(45deg);
      opacity: 0;
  }
  10% {left: 55vw;
      top: 265vw;
    position: absolute;
    transform: scale(1)rotate(45deg);
      opacity: 1;
  }

  45% {
      top: 240vw;
      left: 35vw;
    position: absolute;
    transform: scale(.5)rotate(45deg);
  }
  55% {      left: 33vw;
      top: 240vw;
    position: absolute;
    transform: scale(.5)rotate(-45deg);
  }

  90% {left: 5vw;
      top: 265vw;
    position: absolute;
    transform: scale(1)rotate(-45deg);
    opacity: 1;
  }
  100% {left: 0vw;
          top: 270vw;
        transform: scale(1)rotate(-45deg);
    opacity: 0;
  }
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
#tit3{
  font-family: 'Saira Stencil One',sans-serif;
    font-size: 3vw;
  text-shadow: 3px 3px 3px black;
  color: white;
  text-align: center;
  padding: 5px;
  width: 72vw;
}
.vidBox3 {
  width: 72vw;
  margin: auto;
  grid-area: 7/2/8/6;
  /* row 7 - 8, column 2 -6 */
    z-index: 4;
}
/* make the video content responsive */
#videoID3{
width:100%; height: 100%; position: relative;
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */


#aside3L{
  position: absolute;
  top: 290vw;
  left:2vw;
  grid-area: 3/1/4/2;
  /* row 3 - 4, column 1 -2 */
  text-align: center;
    margin: auto;
      z-index:3000;
}
#aside3R{
  position: absolute;
  top: 290vw;
right:2vw;
  grid-area: 3/6/4/7;
  /* row 3 - 4, column 6 -7 */
  text-align: center;
    margin: auto;
      z-index: 3000;
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
#spaceBox4 {
  font-family: 'Saira Stencil One',sans-serif;
  font-size: 3vw;
	text-shadow: 3px 3px 3px black;
  color: white;
  text-align: center;
  padding: 5px;
  width: 100vw;
      height: 32vw;
  margin: auto;
  grid-area: 8/1/9/7;
  /* row 8 - 9, column 1 -7 ie full width */
}
#protesters-front {
  position: absolute;
  left: 10vw;
  top: 350vw;
  animation-name: fronting;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  z-index: 20;
}
@keyframes fronting {
  0% {  left: 10vw;
    position: absolute;
    transform: scale(0);
  }
  100% {  left: 30vw;
    position: absolute;
    transform: scale(1);
  }
}
#protesters-back {
  position: absolute;
    left: 40vw;
  top: 360vw;
  animation-name: backing;
  animation-delay: 20s;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  opacity: 0;
      transform: scale(1.2 );
  z-index: 22;
}
@keyframes backing {
  0% {  left: 40vw;
    position: absolute;
    transform: scale(1.2 );
    opacity: 1 ;
  }

  100% {  left: 55vw;
    position: absolute;
    transform: scale(0);
    opacity: 1 ;
  }
}


/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
#tit4{
  font-family: 'Saira Stencil One',sans-serif;
    font-size: 3vw;
  text-shadow: 3px 3px 3px black;
  color: white;
  text-align: center;
  padding: 5px;
  width: 72vw;
}
.vidBox4 {
  width: 72vw;
  margin: auto;
  grid-area: 9/2/10/6;
  /* row 9 - 10, column 2 -6 */
      z-index: 4;
}
/* make the video content responsive */
#videoID4{
width:100%; height: 100%; position: relative;
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
#spaceBox5 {
  font-family: 'Saira Stencil One',sans-serif;
  font-size: 3vw;
	text-shadow: 3px 3px 3px black;
  color: white;
  text-align: center;
  padding: 5px;
  width: 100vw;
    height: 32vw;
  margin: auto;
  grid-area: 10/1/11/7;
  /* row 10 - 11, column 1 -7 ie full width */
}


#headBox{
  position: absolute;
  top: 465vw;
  left: 20vw;
}
#xavierWaveBox{
  position: absolute;
  top: 465vw;
  left: 55vw;
}
#xavierHandBox {
  position: absolute;
  left:66vw;
  top: 480vw;
        transform: rotate(-90deg);
  animation-name: xavier ;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  z-index: 5;
}
@keyframes xavier {
  0% {left:66vw;
      top: 480vw;
    opacity: 0;
          transform: rotate(-90deg);
  }
  8% {left:66vw;
    top: 460vw;
        opacity: 1;
        transform: rotate(-40deg);
  }
  10% {left:66vw;
    top: 480vw;
      transform: rotate(-90deg);
              opacity: 1;
  }
  30% {left:50vw;
    top: 460vw;
        transform: rotate(-40deg);
          opacity: 1;
  }
  32% {left:50vw;
    top: 480vw;
      transform: rotate(-90deg);
  }

60% {left:25vw;
  top: 460vw;
        transform: rotate(-40deg);
  }
  62% {left: 25vw;
    top: 480vw;
        transform: rotate(-90deg);
          opacity: 1;
  }
  100% {left:18vw;
     top: 480vw;
        opacity: 0;
              transform: rotate(-90deg);
  }
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
#tit5{
  font-family: 'Saira Stencil One',sans-serif;
    font-size: 3vw;
  text-shadow: 3px 3px 3px black;
  color: white;
  text-align: center;
  padding: 5px;
  width: 72vw;
}
.vidBox5 {
  width: 72vw;
  margin: auto;
  grid-area: 11/2/12/6;
  /* row 11 - 12, column 2 -6 */
      z-index: 4;
}
/* make the video content responsive */
#videoID5{
width:100%; height: 100%; position: relative;
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
#spaceBox6 {
  font-family: 'Saira Stencil One',sans-serif;
  font-size: 3vw;
	text-shadow: 3px 3px 3px black;
  color: white;
  text-align: center;
  padding: 5px;
  width: 100vw;
    height: 32vw;
  margin: auto;
  grid-area: 12/1/13/7;
  /* row 12 - 13, column 1 -7 ie full width */
}
#fightback{
  position: absolute;
  top: 570vw;
  left:5vw;
    z-index: 3;
}

#protesters-RL1a {
  position: absolute;
  left: 50vw;
  top: 570vw;
  opacity: 0;
  animation-name: pRL1a ;
  animation-duration: 10s;
    animation-delay: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  z-index: 2;
}
@keyframes pRL1a {
  0% {  left: 50vw;
      top: 550vw;
    opacity: 0;
    transform: scale(.3);
  }
  15% {opacity: 1;
  }

85% {opacity: 1;
      transform: scale(1);
  }
  100% {left: 0vw;
      top: 570vw;
        opacity: 0;
  }
}
#protesters-LR2a {
  position: absolute;
top: 570vw;
left:0vw;
  animation-name: pLR2a;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  z-index:  9;
}
@keyframes pLR2a {
  0% {left:0vw;
      top: 570vw;
    opacity: 0;
  }

  10% {opacity: 1;
  }

  85% {opacity: 1;
  }

  100% {  left: 50vw;
      top: 570vw;
        opacity: 0;
  }
  }

/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
#tit6{
  font-family: 'Saira Stencil One',sans-serif;
    font-size: 3vw;
  text-shadow: 3px 3px 3px black;
  color: white;
  text-align: center;
  padding: 5px;
  width: 72vw;
}
.vidBox6 {
  width: 72vw;
  margin: auto;
  grid-area: 13/2/14/6;
  /* row 13 - 14, column 2 -6 */
      z-index: 4;
}
/* make the video content responsive */
#videoID6{
width:100%; height: 100%; position: relative;
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
#spaceBox7 {
  font-family: 'Saira Stencil One',sans-serif;
  font-size: 3vw;
	text-shadow: 3px 3px 3px black;
  color: white;
  text-align: center;
  padding: 5px;
  width: 100vw;
  height: 10vw;
  margin: auto;
  grid-area: 14/1/15/7;
  /* row 13 - 15, column 1 -7 ie full width */
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */

/* ALL MODALS BELOW - look next to vidboxes for aside boxes///////////////////////  */

/* 0000000000000000000000XXXXXXXXXXXXXXX00000000000000000  START OF BLOCK 1La */
/* The Modal _1La (background) */
.modal_1La {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 3000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.7);
  font-family: 'Allerta Stencil', sans-serif;
  color: white;
  font-size: 20px;
}

/* Modal Content/Box */
.modal_1La-content {
  background-color: black;
  margin: auto;
  position: fixed;
  left: 20vw;
  top: 10vw;
  padding: 20px;
  width: 75vw;
  height: 75vh;
}
/* Modal HD Content/Box */
.modal_1LaHD-content {
  background-color: black;
  margin: auto;
  position: fixed;
  left: 12vw;
  top: 10vw;
  padding: 20px;
  width: 75vw;
  height: 75vh;
}

/* The Close Button */
.modal_1Laclose {
  color: white;
  float: right;
  font-family: 'Allerta Stencil', sans-serif;
  font-size: 20px;
}

.modal_1Laclose:hover,
.modal_1Laclose:focus {
  color: white;
  text-decoration: none;
  cursor: pointer;
}
/* Make modal backgrounds show cursor:pointer */
#myModal_1La:hover {
  cursor: pointer;
}
#myModal_1LaBtn:hover {
  cursor: pointer;
}
.modal_1La-content:hover {
  cursor: default;
}
/* 0000000000000000000000XXXXXXXXXXXXXXX00000000000000000 */

/* 0000000000000000000000XXXXXXXXXXXXXXX00000000000000000 START OF BLOCK 1Ra  */
/* The Modal _1Ra (background) */
.modal_1Ra {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 3000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.7);
  font-family: 'Allerta Stencil', sans-serif;
  color: white;
  font-size: 20px;
}

/* Modal Content/Box */
.modal_1Ra-content {
  background-color: black;
  margin: auto;
  position: fixed;
  left: 20vw;
  top: 10vw;
  padding: 20px;
  width: 75vw;
  height: 75vh;
}
/* Modal HD Content/Box */
.modal_1RaHD-content {
  background-color: black;
  margin: auto;
  position: fixed;
  left: 12vw;
  top: 10vw;
  padding: 20px;
  width: 75vw;
  height: 75vh;
}

/* The Close Button */
.modal_1Raclose {
  color: white;
  float: right;
  font-family: 'Allerta Stencil', sans-serif;
  font-size: 20px;
}

.modal_1Raclose:hover,
.modal_1Raclose:focus {
  color: white;
  text-decoration: none;
  cursor: pointer;
}
/* Make modal backgrounds show cursor:pointer */
#myModal_1Ra:hover {
  cursor: pointer;
}
#myModal_1RaBtn:hover {
  cursor: pointer;
}
.modal_1Ra-content:hover {
  cursor: default;
}
/* 0000000000000000000000XXXXXXXXXXXXXXX00000000000000000 */

/* 0000000000000000000000XXXXXXXXXXXXXXX00000000000000000  START OF BLOCK 1Rb */
/* The Modal _1Rb (background) */
.modal_1Rb {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 3000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.7);
  font-family: 'Allerta Stencil', sans-serif;
  color: white;
  font-size: 20px;
}

/* Modal Content/Box */
.modal_1Rb-content {
  background-color: black;
  margin: auto;
  position: fixed;
  left: 20vw;
  top: 10vw;
  padding: 20px;
  width: 75vw;
  height: 75vh;
}
/* Modal HD Content/Box */
.modal_1RbHD-content {
  background-color: black;
  margin: auto;
  position: fixed;
  left: 12vw;
  top: 10vw;
  padding: 20px;
  width: 75vw;
  height: 75vh;
}

/* The Close Button */
.modal_1Rbclose {
  color: white;
  float: right;
  font-family: 'Allerta Stencil', sans-serif;
  font-size: 20px;
}

.modal_1Rbclose:hover,
.modal_1Rbclose:focus {
  color: white;
  text-decoration: none;
  cursor: pointer;
}
/* Make modal backgrounds show cursor:pointer */
#myModal_1Rb:hover {
  cursor: pointer;
}
#myModal_1RbBtn:hover {
  cursor: pointer;
}
.modal_1Rb-content:hover {
  cursor: default;
}

/* 0000000000000000000000XXXXXXXXXXXXXXX00000000000000000 END OF BLOCK 1 */











/* 0000000000000000000000XXXXXXXXXXXXXXX00000000000000000  START OF BLOCK 3La */
/* The Modal _3Ra (background) */
.modal_3La {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 3000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.7);
  font-family: 'Allerta Stencil', sans-serif;
  color: white;
  font-size: 20px;
}

/* Modal Content/Box */
.modal_3La-content {
  background-color: black;
  margin: auto;
  position: fixed;
  left: 20vw;
  top: 10vw;
  padding: 20px;
  width: 75vw;
  height: 75vh;
}
/* Modal HD Content/Box */
.modal_3LaHD-content {
  background-color: black;
  margin: auto;
  position: fixed;
  left: 12vw;
  top: 10vw;
  padding: 20px;
  width: 75vw;
  height: 75vh;
}

/* The Close Button */
.modal_3Laclose {
  color: white;
  float: right;
  font-family: 'Allerta Stencil', sans-serif;
  font-size: 20px;
}

.modal_3Laclose:hover,
.modal_3Laclose:focus {
  color: white;
  text-decoration: none;
  cursor: pointer;
}
/* Make modal backgrounds show cursor:pointer */
#myModal_3La:hover {
  cursor: pointer;
}
#myModal_3LaBtn:hover {
  cursor: pointer;
}
.modal_3La-content:hover {
  cursor: default;
}
/* 0000000000000000000000XXXXXXXXXXXXXXX00000000000000000 */

/* 0000000000000000000000XXXXXXXXXXXXXXX00000000000000000  START OF BLOCK 3Ra */
/* The Modal _3Ra (background) */
.modal_3Ra {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 3000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.7);
  font-family: 'Allerta Stencil', sans-serif;
  color: white;
  font-size: 20px;
}

/* Modal Content/Box */
.modal_3Ra-content {
  background-color: black;
  margin: auto;
  position: fixed;
  left: 20vw;
  top: 10vw;
  padding: 20px;
  width: 75vw;
  height: 75vh;
}
/* Modal HD Content/Box */
.modal_3RaHD-content {
  background-color: black;
  margin: auto;
  position: fixed;
  left: 12vw;
  top: 10vw;
  padding: 20px;
  width: 75vw;
  height: 75vh;
}

/* The Close Button */
.modal_3Raclose {
  color: white;
  float: right;
  font-family: 'Allerta Stencil', sans-serif;
  font-size: 20px;
}

.modal_3Raclose:hover,
.modal_3Raclose:focus {
  color: white;
  text-decoration: none;
  cursor: pointer;
}
/* Make modal backgrounds show cursor:pointer */
#myModal_3Ra:hover {
  cursor: pointer;
}
#myModal_3RaBtn:hover {
  cursor: pointer;
}
.modal_3Ra-content:hover {
  cursor: default;
}
/* 0000000000000000000000XXXXXXXXXXXXXXX00000000000000000 */

/* 0000000000000000000000XXXXXXXXXXXXXXX00000000000000000 START OF BLOCK 3Rb */
/* The Modal _3Rb (background) */
.modal_3Rb {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 3000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.7);
  font-family: 'Allerta Stencil', sans-serif;
  color: white;
  font-size: 20px;
}

/* Modal Content/Box */
.modal_3Rb-content {
  background-color: black;
  margin: auto;
  position: fixed;
  left: 20vw;
  top: 10vw;
  padding: 20px;
  width: 75vw;
  height: 75vh;
}
/* Modal HD Content/Box */
.modal_3RbHD-content {
  background-color: black;
  margin: auto;
  position: fixed;
  left: 12vw;
  top: 10vw;
  padding: 20px;
  width: 75vw;
  height: 75vh;
}

/* The Close Button */
.modal_3Rbclose {
  color: white;
  float: right;
  font-family: 'Allerta Stencil', sans-serif;
  font-size: 20px;
}

.modal_3Rbclose:hover,
.modal_3Rbclose:focus {
  color: white;
  text-decoration: none;
  cursor: pointer;
}
/* Make modal backgrounds show cursor:pointer */
#myModal_3Rb:hover {
  cursor: pointer;
}
#myModal_3RbBtn:hover {
  cursor: pointer;
}
.modal_3Rb-content:hover {
  cursor: default;
}
/* 0000000000000000000000XXXXXXXXXXXXXXX00000000000000000 END OF BLOCK 3 */

/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */


/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */



#fracturedSelvesButt{
  width:15vw;
  max-width: 220px;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: fixed;
left:0vw;
  top: 4vw;
  width:12vw;
  max-width: 220px;
  z-index: 4000;
    font-family: 'Saira Stencil One', sans-serif;
    font-size: 2vw;
    margin: auto;
    text-align: center;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: relative;
/* left: 1vw; */
    min-width: 1em;
    background-color: rgba(0,0,0,0.6);
    font-family: 'Allerta Stencil', sans-serif;
    font-size: 1.2vw;
    color: white;
    padding: 5px;
    text-decoration: none;
    border-bottom: 0.1vw solid white;
    z-index: 4000;
    width:9vw;
    max-width: 220px;
        text-align: center;
    /* margin: auto; */
    /* height: 7em; */
}
/* .dropdown-content2 {
    display: none;
    position: relative;
    right: 7vw;
    min-width: 1em;
    background-color: rgba(0,0,0,0.3);
    z-index: 20;
    width:10vw;
    max-width: 220px;
    text-align: left;
} */
/* Links inside the dropdown */
/* .dropdown-content2 a {
    background-color: rgba(0,0,0,0.6);
    font-family: 'Allerta Stencil', sans-serif;
    font-size: 1vw;
    color: white;
    text-decoration: none;
    border-bottom: 0.1vw solid white;
    display: block;
} */
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}
/* Show the dropdown second menu on hover */
/* .dropdown-content:hover .dropdown-content2 {
    display: block;
} */

/* +++++++++++++++++++++++++++++++++++++++++++++++++ */