@charset "UTF-8";

* {
  box-sizing: border-box;
}
body {
	background-image: url("images/resist-wallpaper-800w.jpg");
	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;
background: rgba(0,0,0,0.85);
width: 100vw;
	font-size: 2em;
	color: white;
	text-align: center;
	padding: 5px;
	text-transform: uppercase;
	text-shadow: 3px -3px 3px #d3d3d3
	z-index: -100;
}
h2 {font-family: 'Saira Stencil One', sans-serif;
	background: #1d1e1f;
	font-size: 1.5em;
	color: white;
	text-align: left;
	padding: 5px;
	text-transform: uppercase;
	text-shadow: -3px 3px 3px #d3d3d3;
	z-index: -10;
}
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);
}
img {
  overflow: hidden;
}

.items {
  display: grid;
  align-content: stretch;
  justify-content: space-around;
  min-width: 600px;
min-height: 100vh;
  grid-template-columns: 18vw  18vw  18vw  18vw  18vw;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  margin: auto;
}
#firstRow {
  grid-area: 1/1/2/6;
  align-self: center;
    z-index: 20;
}

#sideArch{

align-items: center;
  justify-content: center;
  position: absolute;
width: 95vw;
left:0px;
/* top: 150px; */
top: 15vw;
    z-index: -1;
}
#sideArch2{

align-items: center;
  justify-content: center;
  position: absolute;
width: 95vw;
left:0px;
top: 64vw;
    z-index: -2;
}
#itemBox01a {
grid-column: 1/3;
grid-row: 2/4;
  z-index: 1;
}
#itemBox01a:hover{ opacity: 0; cursor: url('images/fightback-horn-64R.png'), default !important;}

#itemBox01b {
grid-area: 2/3/4/4;
  z-index: 1;
}
#itemBox01b:hover{ opacity: 0; cursor: url('images/fightback-horn-64L.png'), default !important;}

#itemBox01c {
grid-area: 2/4/4/6;
  z-index: 1;
}
#itemBox01c:hover{ opacity: 0; cursor: url('images/fightback-horn-64R.png'), default !important;}

#itemBox02a {
grid-area: 4/1/6/3;
  z-index: 1;
}
#itemBox02a:hover{ opacity: 0; cursor: url('images/fightback-horn-64L.png'), default !important;}

#itemBox02b {
grid-area: 4/3/6/4;
  z-index: 1;
}
#itemBox02b:hover{ opacity: 0;cursor: url('images/fightback-horn-64R.png'), default !important;}

#itemBox02c {
grid-area: 4/4/6/6;
  z-index: 1;
}
#itemBox02c:hover{ opacity: 0; cursor: url('images/fightback-horn-64L.png'), default !important;}

#itemBox03a {
grid-area: 6/1/8/3;
  z-index: 1;
}
#itemBox03a:hover{ opacity: 0; cursor: url('images/fightback-horn-64R.png'), default !important;}

#itemBox03b {
grid-area: 6/3/8/4;
    z-index: 1;
}
#itemBox03b:hover{ opacity: 0; cursor: url('images/fightback-horn-64L.png'), default !important;}

#itemBox03c {
grid-area: 6/4/8/6;
  z-index: 1;
}
#itemBox03c:hover{ opacity: 0; cursor: url('images/fightback-horn-64R.png'), default !important;}

#itemBox04a {
grid-area: 8/1/10/3;
  z-index: 1;
}
#itemBox04a:hover{ opacity: 0; cursor:url('images/fightback-horn-64L.png'), default !important;}

#itemBox04b {
grid-area: 8/3/10/4;
  z-index: 1;
}
#itemBox04b:hover{ opacity: 0; cursor: url('images/fightback-horn-64R.png'), default !important;}

#itemBox04c {
grid-area: 8/4/10/6;
  z-index: 1;
}
#itemBox04c:hover{ opacity: 0; cursor: url('images/fightback-horn-64L.png'), default !important;}


#gradientz{
   background: linear-gradient(rgba(0,0,0,0.9),rgba(0,0,0,0.5),rgba(0,0,0,0.8),rgba(0,0,0,0.5),rgba(0,0,0,0.85),rgba(0,0,0,.9));
    z-index: -999;
  }

.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;
}


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

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

#protesters-RL1a {
  position: absolute;
top: 10%;
left: 100%;
  animation-name: pRL1a;
  /* animation-delay: 5s; */
  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%;
    /* transform: scale(0.6); */
  }
}
#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%;
    /* transform: scale(0.6); */
  }
}
#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: 50%;
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%;
    /* transform: scale(0.6); */
  }
}
#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%;
    /* transform: scale(0.6); */
  }
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
#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 ;
  }
}
/* //+++++++++++++++++++++++++++++++++++++++++++++++++ */


/* #movBox01{
} */
/* #movBox01:hover{ opacity: 0;} */

.movBoxes1{
  width: 16vw;
  max-width: 250px;
  margin: 10px;
  animation-name: moveAside1;
  animation-duration:10s;
  animation-iteration-count: infinite;
    z-index: -1;
}
/* .movBoxes1:hover{ opacity: 0;} */

.movBoxes2{
  width: 16vw;
  max-width: 250px;
  margin: 10px;
  animation-name: moveAside2;
  animation-delay: 5s;
  animation-duration:10s;
  animation-iteration-count: infinite;
    z-index: -35;
}
/* .movBoxes2:hover{ opacity: 0;} */

@keyframes moveAside1 {
  0% {transform: scale(1.0)rotate(0deg);
  }
  49% {transform: scale(0)rotate(-20deg);}
    51% {transform: scale(0)rotate(20deg);
  }
  100% {transform: scale(1.0)rotate(0deg);
  }
}

@keyframes moveAside2 {
  0% {transform: scale(1.0)rotate(0deg);
  }
  49% {transform: scale(0)rotate(20deg);}
    51% {transform: scale(0)rotate(-20deg);
  }
  100% {transform: scale(1.0)rotate(0deg);
  }
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */


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

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: absolute;
  right:10vw;
  top: 2vw;
  width:12vw;
  max-width: 220px;
		z-index: 2020;
    font-family: 'Saira Stencil One', sans-serif;
    font-size: 1.5em;
    margin: auto;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: relative;
  right:-4vw;
    min-width: 1em;
    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;
    z-index: 20;
    width:8vw;
    max-width: 220px;
    /* 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;
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
#backBut{
    position: absolute;
          z-index: 2000;
          top: 6vw;
          left:45vw;
            width:10vw;
            max-width: 220px;
}
#homeBut{
    position: absolute;
          z-index: 2000;
          top: 6vw;
          left:60vw;
            width:10vw;
            max-width: 220px;
}
#mash{
    position: absolute;
          z-index: 2000;
          top: 3vw;
          left:0vw;
            width:35vw;
}
#tit{
    position: absolute;
          z-index: 2000;
          top: 10vw;
          left:0vw;
            width:35vw;
}