@charset "UTF-8";

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

	text-align: center;
	margin: auto;
}
p {
    font-family: 'Oxygen', sans-serif;
    font-weight: 300;
    font-size: 1em;
    color: white;
    background: rgba(200,0,0,0.85);
			z-index: -10;
}


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

	font-size: 6.5vw;
  letter-spacing: .4vw;
	color: white;
	text-align: center;
	padding: 5px;
	text-transform: uppercase;
}
h2 {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;
}
h3 {font-family: 'Saira Stencil One', sans-serif;
    font-size: 1em
    color: white;
    text-align: center;
		z-index: -10;
    }
h4 {font-family: "allerta-stencil-body", sans-serif;
    font-size: 1em;
    padding: 5px;
    text-align: center;
    color: #FFFFFF;
	background: rgba(0,00,0,0.65);
}

.saira	{
    padding: 3px;
    font-family: 'Saira Stencil One', sans-serif;
    font-size: 1.5em;
    text-align: center;
    color: #FFFFFF;
	background: rgba(0,0,0,0.85);
		max-width: 1000px;
		margin: auto;
		z-index: -10;
}

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; */
}
#backgroundAbout {
	background-image: url("images/fsGDK_bk.jpg");
  background-size: 100vw;
  background-repeat: repeat;
  height: 2100vw;
	text-align: center;
	margin: auto;
}
#backgroundVid {
	background-image: url("images/fssMach_bk.jpg");
  background-size: 100vw;
  background-repeat: repeat;
  height: 320vw;
	text-align: center;
	margin: auto;
}
#backgroundNav {
	background-image: url("images/fsGman_bk.jpg");
  background-size: 100vw;
  background-repeat: repeat;
  height: 350vw;
	text-align: center;
	margin: auto;
}
#backgroundGDK {
	background-image: url("images/fsGDK_bk.jpg");
  background-size: 100vw;
	text-align: center;
	margin: auto;
}
#backgroundGman {
	background-image: url("images/fsGman_bk.jpg");
  background-size: 100vw;
	text-align: center;
	margin: auto;
}
#backgroundSensei {
	background-image: url("images/fsSensei_bk.jpg");
  background-size: 100vw;
	text-align: center;
	margin: auto;
}
#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 */
}
#aboutTextBox1 {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;
  grid-area: 1/1/2/7;
    position: relative;
      /* background: rgba(00,0,0,0.85); */
}
#aboutTextBox2 {
  position: absolute;
  top: 13vw;
  left: 14vw;
  font-family: 'Saira Stencil One', sans-serif;
      text-align: center;
  font-size: 3vw;
  color: white;
  text-align: center;
  padding: 5px;
  width: 72vw;
  margin: auto;
  grid-area: 2/1/3/7;
      background: rgba(00,0,0,0.85);
}
#aboutTextBox3a {
  position: absolute;
  top: 20vw;
  left: 14vw;
  font-family: 'Oxygen', sans-serif;
  font-weight: 300;
  font-size: 1.75vw;
  color: white;
  text-align: center;
padding: 1.5vw;
  width: 72vw;
    /* height: 32vw; */
  margin: auto;
  grid-area: 3/1/4/7;
      background: rgba(00,0,0,0.85);
}
#aboutTextBox3b {
  position: absolute;
  top: 27vw;
  left: 14vw;
  font-family: 'Oxygen', sans-serif;
  font-weight: 300;
  font-size: 1.75vw;
  color: white;
  text-align: center;
padding: 1.5vw;
  width: 72vw;
    /* height: 32vw; */
  margin: auto;
  grid-area: 3/1/4/7;
      background: rgba(00,0,0,0.85);
}
#aboutTextBox3c {
  position: absolute;
  top: 40vw;
  left: 14vw;
  font-family: 'Oxygen', sans-serif;
  font-weight: 300;
  font-size: 1.75vw;
  color: white;
  text-align: center;
  padding: 1.5vw;
  width: 72vw;
    /* height: 32vw; */
  margin: auto;
  grid-area: 3/1/4/7;
      background: rgba(00,0,0,0.85);
}
#aboutTextBox4 {
  position: absolute;
  top: 48vw;
  left: 14vw;
  /* font-family: 'Oxygen', sans-serif;
  font-weight: 300;
  font-size: 1.75vw;
    letter-spacing: .2vw; */
  color: white;
  text-align: left;
  /* padding: 15px; */
  width: 72vw;
  margin: auto;
  grid-area: 4/1/5/7;

}
.aboutParagraphs {
  font-family: 'Oxygen', sans-serif;
  font-weight: 300;
  font-size: 1.5em;
    letter-spacing: .2vw;
  color: white;
  text-align: justify;
  padding: 15px;
  /* width: 72vw; */
  margin-bottom: 2vw;
  background: rgba(00,0,0,0.85);
  padding: 15px;
}
#navTextBox2 {
  position: absolute;
  top: 10vw;
  left: 14vw;
  font-family: 'Oxygen', sans-serif;
  font-weight: 300;
  font-size: 1.75vw;
  color: white;
  text-align: center;
  width: 72vw;
  margin: auto;
  grid-area: 2/1/3/7;
      background: rgba(00,0,0,0.85);
}
#navTextBox4 {
  position: absolute;
  top: 180vw;
  left: 14vw;
  font-family: 'Oxygen', sans-serif;
  font-weight: 300;
  font-size: 1.75vw;
    letter-spacing: .2vw;
  color: white;
  text-align: left;
  padding: 15px;
  width: 72vw;
  margin: auto;
  grid-area: 4/1/5/7;
      background: rgba(00,0,0,0.85);
}
/* VIDEO */
#spaceBox1 {
  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;
    height: 32vw;
  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 */
}
.vidBox1 {
  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: 3/2/4/6;
  /* row 3 - 4, column 2 -6 */
}
/* make the video content responsive */
#videoID1{
width:100%; height: 100%; position: relative;
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
#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 */
}
.vidBox2 {
  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: 5/2/6/6;
  /* row 5 - 6, column 2 -6 */
}
/* 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 */
}
.vidBox3 {
  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: 7/2/8/6;
  /* row 7 - 8, column 2 -6 */
}
/* make the video content responsive */
#videoID3{
width:100%; height: 100%; position: relative;
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
#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 */
}
.vidBox4 {
  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: 9/2/10/6;
  /* row 9 - 10, column 2 -6 */
}
/* 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 */
}
.vidBox5 {
  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: 11/2/12/6;
  /* row 11 - 12, column 2 -6 */
}
/* 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 */
}
.vidBox6 {
  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: 13/2/14/6;
  /* row 13 - 14, column 2 -6 */
}
/* 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 */
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */

#protesters-RL1a {
  position: absolute;
top: 10%;
left: 100%;
  animation-name: pRL1a;
  animation-duration: 35s;
  animation-iteration-count: infinite;
  z-index:  10;
}
@keyframes pRL1a {
  0% {top: 10%;
    position: absolute;
  left: 100%;
  transform: scale(0.6);
  }
  100% {top: 30%;
    position: absolute;
    left: -80%;
  }
}
#protesters-LR1a {
  position: absolute;
top: 10%;
right: 100%;
  animation-name: pLR1a;
  animation-delay:   5s;
  animation-duration: 35s;
  animation-iteration-count: infinite;
  z-index:  9;
}
@keyframes pLR1a {
  0% {top: 10%;
    position: absolute;
  right: 100%;
  transform: scale(0.6);
  }
  100% {top: 30%;
    position: absolute;
    right: -80%;
  }
}
#protesters-RL2a {
  position: absolute;
top: 90%;
left: 100%;

  animation-name: pRL2a;
  animation-delay: 20s;
  animation-duration: 35s;
  animation-iteration-count: infinite;
  z-index:  10;
}
@keyframes pRL2a {
  0% {top: 90%;
    position: absolute;
  left: 100%;
  transform: scale(0.6)rotate(15deg);
  }
  100% {top: 50%;
    position: absolute;
    left: -80%;
  transform: scale(1)rotate(15deg);
  }
}
#protesters-LR2a {
  position: absolute;
top: 90%;
right: 100%;
  animation-name: pLR2a;
  animation-delay: 15s;
  animation-duration: 35s;
  animation-iteration-count: infinite;
  z-index:  9;
}
@keyframes pLR2a {
  0% {top: 90%;
    position: absolute;
  right: 100%;
transform: scale(0.6)rotate(-15deg);
  }
  100% {top: 50%;
    position: absolute;
    right: -80%;
  transform: scale(1)rotate(-15deg);
  }
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */

#protesters-RL2b {
  position: absolute;
top: 50%;
left: 100%;
  animation-name: pRL2b;
animation-delay: 18s;
  animation-duration: 35s;
  animation-iteration-count: infinite;
  z-index:  -10;
}
@keyframes pRL2b {
  0% {top: 50%;
    position: absolute;
  left: 100%;
transform: scale(0.6)rotate(15deg);
  }
  100% {top: 0%;
    position: absolute;
    left: -80%;
  transform: scale(1)rotate(15deg);
  }
}
#protesters-LR2b {
  position: absolute;
top: 90%;
right: 100%;
  animation-name: pLR2b;
animation-delay: 23s;
  animation-duration: 35s;
  animation-iteration-count: infinite;
  z-index:  -9;
}
@keyframes pLR2b {
  0% {top: 50%;
    position: absolute;
  right: 100%;
transform: scale(0.6)rotate(-15deg);
  }
  100% {top:  0%;
    position: absolute;
    right: -80%;
  transform: scale(1)rotate(-15deg);
  }
}
#protesters-RL1b {
  position: absolute;
top: 70%;
left: 100%;
  animation-name: pRL1b;
animation-delay: 43s;
  animation-duration: 35s;
  animation-iteration-count: infinite;
  z-index:  -10;
}
@keyframes pRL1b {
  0% {top: 70%;
    position: absolute;
  left: 100%;
  transform: scale(0.6);
  }
  100% {top: 90%;
    position: absolute;
    left: -80%;
  }
}
#protesters-LR1b {
  position: absolute;
top: 70%;
right: 100%;
  animation-name: pLR1b;
  animation-delay: 38s;
  animation-duration: 35s;
  animation-iteration-count: infinite;
  z-index:  -9;
}
@keyframes pLR1b {
  0% {top: 70%;
    position: absolute;
  right: 100%;
  transform: scale(0.6);
  }
  100% {top: 90%;
    position: absolute;
    right: -80%;
  }
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
#protesters-front {
  position: absolute;
  left: 5 %;
  top: 40%;
  animation-name: fronting;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  z-index: 20;
}
@keyframes fronting {
  0% {left: 0%;
    position: absolute;
    transform: scale(0);
  }
  100% {left: 35%;
    position: absolute;
    transform: scale(1);
  }
}
#protesters-back {
  position: absolute;
  left: 40%;
  top: 40%;
  animation-name: backing;
  animation-delay: 20s;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  opacity: 0;
  z-index: 22;
}
@keyframes backing {
  0% {left: 40%;
    position: absolute;
    transform: scale(0.9 );
    opacity: 1 ;
  }

  100% {left: 70%;
    position: absolute;
    transform: scale(0);
    opacity: 1 ;
  }
}
/* //+++++++++++++++++++++++++++++++++++++++++++++++++ */



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



#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;
} */

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