@font-face {
  font-family: "GopherMono-Medium";
  src: url(GopherMono-Medium.ttf);
  color: white;
}

body {
  background-color: black;
  width: 93%;
  height: 100%;
  font-family: "GopherMono-Medium";
  overflow: scroll;
}

.depth-scroll {
  width: 100vw;
  height: 50vh;
  position: relative;
  top: 5vh;
  left: 0;
}

.depth-scroll .card {
  width: 100%;
  height: 40%;
  opacity: 0.5;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none
}

.depth-scroll .card.active {
  background-color: none;
  pointer-events: all
}

.title {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  position: fixed;
  z-index: 10000;
  cursor: default;
}

.card-details {
  color: white;
  display: none;
  width: 20px;
  height: 20px;
  float: left;
  left: 68%;
  z-index: 15000;
}

.card-details p {
  position: absolute;
  margin-top: -150px;
  margin-left: 20px;
  width: 170px;
  padding: 1px 1px;
  color: white;
  font-family: "GopherMono-Medium";
  font-size: 11px;
  opacity: 0;
  -webkit-transition: visibility 0s, opacity 0.5s linear;
  transition: visibility 0s, opacity 0.5s linear;
  background-color:rgba(0,0,0,0.2);
}

.card.active .card-details {
  display: block;
}

.card-details:hover {
  cursor: pointer;
}

.card-details p {
  pointer-events: none;
}

.card-details:hover p {
  cursor: pointer;
  visibility: visible;
  opacity: 0.7;
}

img {
  display: block;
  width: 106.6%;
}

.myImg2 {
  position: fixed;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 106.6%;
}

.tempo {
  display: flex;
  flex-wrap: nowrap;
  bottom: 0;
  left: 0;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#aminext {
  width: 100%;
  z-index: -330;
}

#ballaminext {
  position: relative;
  left: 80.3vw;
  top: 1vw;
}

#bringbackourgirls {
  width: 100%;
  z-index: -320;
}

#ballbringbackourgirls {
  position: relative;
  left: 39.7vw;
  top: 1vw;
}

#freebritney {
  width: 100%;
  z-index: -310;
}

#ballfreebritney {
  position: relative;
  left: 86.6vw;
  top: 1vw;
}

#kony2012 {
  width: 100%;
  z-index: -300;
}

#ballkony2012 {
  position: relative;
  left: 23.2vw;
  top: 1vw;
}

#notonemore {
  width: 100%;
  z-index: -290;
}

#ballnotonemore {
  position: relative;
  left: 39.7vw;
  top: 1vw;
}

#girlslikeus {
  width: 100%;
  z-index: -270;
}

#ballgirlslikeus {
  position: relative;
  left: 70.8vw;
  top: 1vw;
}

#lovewins {
  width: 100%;
  z-index: -280;
}

#balllovewins {
  position: relative;
  left: 48vw;
  top: 1vw;
}

#deaftalent {
  width: 100%;
  z-index: -260;
}

#balldeaftalent {
  position: relative;
  left: 62vw;
  top: 1vw;
}

#icebucketchallenge {
  width: 100%;
  z-index: -250;
}

#ballicebucketchallenge {
  position: relative;
  left: 41.7vw;
  top: 1vw;
}

#ownvoices {
  width: 100%;
  z-index: -240;
}

#ballownvoices {
  position: relative;
  left: 83.4vw;
  top: 1vw;
}

#elenao {
  width: 100%;
  z-index: -230;
}

#ballelenao {
  position: relative;
  left: 72.8vw;
  top: 1vw;
}

#idlenomore {
  width: 100%;
  z-index: -220;
}

#ballidlenomore {
  position: relative;
  left: 29vw;
  top: 1vw;
}

#marchforourlives {
  width: 100%;
  z-index: -210;
}

#ballmarchforourlives {
  position: relative;
  left: 69vw;
  top: 1vw;
}

#neveragain {
  width: 100%;
  z-index: -200;
}

#ballneveragain {
  position: relative;
  left: 68.3vw;
  top: 1vw;
}

#nobannowall {
  width: 100%;
  z-index: -190;
}

#ballnobannowall {
  position: relative;
  left: 60vw;
  top: 1vw;
}

#nodalp {
  width: 100%;
  z-index: -180;
}

#ballnodalp {
  position: relative;
  left: 57.5vw;
  top: 1vw;
}

#occupywallstreet {
  width: 100%;
  z-index: -170;
}

#balloccupywallstreet {
  position: relative;
  left: 20.3vw;
  top: 1vw;
}

#oromoprotests {
  width: 100%;
  z-index: -160;
}

#balloromoprotests {
  position: relative;
  left: 57.1vw;
  top: 1vw;
}

#umbrellarevolution {
  width: 100%;
  z-index: -150;
}

#ballumbrellarevolution {
  position: relative;
  left: 43vw;
  top: 1vw;
}

#givingtuesday {
  width: 100%;
  z-index: -140;
}

#ballgivingtuesday {
  position: relative;
  left: 74vw;
  top: 1vw;
}

#jesuischarlie {
  width: 100%;
  z-index: -130;
}

#balljesuischarlie {
  position: relative;
  left: 45vw;
  top: 1vw;
}

#prayforjapan {
  width: 100%;
  z-index: -120;
}

#ballprayforjapan {
  position: relative;
  left: 15.7vw;
  top: 1vw;
}

#prayforparis {
  width: 100%;
  z-index: -110;
}

#ballprayforparis {
  position: relative;
  left: 51.1vw;
  top: 1vw;
}

#stopfundinghate {
  width: 100%;
  z-index: -100;
}

#ballstopfundinghate {
  position: relative;
  left: 58.8vw;
  top: 1vw;
}

#sosblakaustralia {
  width: 100%;
  z-index: -90;
}

#ballsosblakaustralia {
  position: relative;
  left: 46vw;
  top: 1vw;
}

#blacklivesmatter {
  width: 100%;
  z-index: -80;
}

#ballblacklivesmatter {
  position: relative;
  left: 86vw;
  top: 1vw;
}

#ferguson {
  width: 100%;
  z-index: -70;
}

#ballferguson {
  position: relative;
  left: 43.8vw;
  top: 1vw;
}

#istandwithahmed {
  width: 100%;
  z-index: -60;
}

#ballistandwithahmed {
  position: relative;
  left: 50vw;
  top: 1vw;
}

#myasianamericanstory {
  width: 100%;
  z-index: -50;
}

#ballmyasianamericanstory {
  position: relative;
  left: 49.3vw;
  top: 1vw;
}

#notinmyname {
  width: 100%;
  z-index: -40;
}

#ballnotinmyname {
  position: relative;
  left: 51.1vw;
  top: 1vw;
}

#oscarssowhite {
  width: 100%;
  z-index: -30;
}

#balloscarssowhite {
  position: relative;
  left: 52.3vw;
  top: 1vw;
}

#publishingpaidme {
  width: 100%;
  z-index: -20;
}

#ballpublishingpaidme {
  position: relative;
  left: 86vw;
  top: 1vw;
}

#takeaknee {
  width: 100%;
  z-index: -10;
}

#balltakeaknee {
  position: relative;
  left: 65vw;
  top: 1vw;
}

#thisis2016 {
  width: 100%;
  z-index: 0;
}

#ballthisis2016 {
  position: relative;
  left: 58.2vw;
  top: 1vw;
}

#dresslikeawoman {
  width: 100%;
  z-index: 10;
}

#balldresslikeawoman {
  position: relative;
  left: 60.9vw;
  top: 1vw;
}

#freethenipple {
  width: 100%;
  z-index: 20;
}

#ballfreethenipple {
  position: relative;
  left: 46.2vw;
  top: 1vw;
}

#heforshe {
  width: 100%;
  z-index: 30;
}

#ballheforshe {
  position: relative;
  left: 42.2vw;
  top: 1vw;
}

#ilooklikeanengineer {
  width: 100%;
  z-index: 40;
}

#ballilooklikeanengineer {
  position: relative;
  left: 49.5vw;
  top: 1vw;
}

#metoo {
  width: 100%;
  z-index: 50;
}

#ballmetoo {
  position: relative;
  left: 65.8vw;
  top: 1vw;
}

#shoutyourabortion {
  width: 100%;
  z-index: 60;
}

#ballshoutyourabortion {
  position: relative;
  left: 50vw;
  top: 1vw;
}

#whyistayed {
  width: 100%;
  z-index: 70;
}

#ballwhyistayed {
  position: relative;
  left: 42.3vw;
  top: 1vw;
}

#womensmarch {
  width: 100%;
  z-index: 80;
}

#ballwomensmarch {
  position: relative;
  left: 60vw;
  top: 1vw;
}

#yesallwomen {
  width: 100%;
  z-index: 90;
}

#ballyesallwomen {
  position: relative;
  left: 39.7vw;
  top: 1vw;
}

.hashtag4 {
  width: 106.6%;
  margin-top: 13%;
}

.hashtag4 {
  width: 106.6%;
  margin-top: 11, 5%;
}

.texto2 {
  font-family: "GopherMono-Medium";
  font-size: 1vw;
  margin: 3%;
  color: white;
  margin-left: 15%;
  text-align: center;
}

.h0 {
  font-family: "GopherMono-Medium";
  font-size: 1.5vw;
  margin: 78%;
  color: white;
}

.dropdownsubtitle div.subtitle {
  visibility: hidden;
  width: 30%;
  font-size: 1vw;
  color: white;
  position: fixed;
  margin-top: -2%;
  margin-left: 3.5%;
  -webkit-transition: visibility 0s, opacity 3s linear;
  transition: visibility 3s, opacity 3s linear;
}

.dropdownsubtitle.active div.subtitle {
  visibility: visible;
}

.dropdownsubtitle:hover div.subtitle {
  visibility: visible;
  cursor: pointer;
  -webkit-transition: visibility 0s, opacity 0.5s linear;
  transition: visibility 0s, opacity 0.5s linear;
}

.dropdownsubtitle div.about {
  visibility: hidden;
      color: white;
      position: fixed;
      width: 100%;
      height: 100%;
      border-width: 100vh;
      z-index: 14;
      background-color:rgba(0,0,0,0.7);
      -webkit-transition: visibility 0s, opacity 0.5s linear; 
      transition: visibility 0s, opacity 0.5s linear; 
}

p.abouttexto {
  width: 45%;
  margin-top: 2.5%;
  margin-left: 2.5%;
  position: fixed;
  padding: 8px 15px;
  color: white;
  word-spacing: -1px;
  line-height: 1.6;
  font-family: 'GopherMono-Medium';
    font-size:11.5px;
 -webkit-transition: visibility 0s, opacity 0.5s linear; 
  transition: visibility 0s, opacity 0.5s linear; 
}

.dropdownsubtitle.active div.about {
  visibility: visible;
  font-size: 0.8vw;
  -webkit-transition: visibility 0s, opacity 0.5s linear;
  transition: visibility 0s, opacity 0.5s linear;
}

a:link {
  color: rgb(247, 0, 255);
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: rgb(247, 0, 255);
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}


.button1 {
  position: fixed;
  margin-top: 0%;
  margin-left: 48vw;
  background-color: #c7fc81;
  border-radius: 10px;
  border-style: hidden;
  width: 1vw;
  height: 1vw;
}

.dropdown div.btn1title {
  visibility: hidden;
  width: 30%;
  color: white;
  position: fixed;
  margin-top: 2%;
  margin-left: 45.4vw;
}

.dropdown:hover div.btn1title {
  visibility: visible;
  font-size: 0.8vw;
}

.button2 {
  position: fixed;
  margin-top: 0%;
  margin-left: 49.5vw;
  background-color: #27b76b;
  border-radius: 10px;
  border-style: hidden;
  width: 1vw;
  height: 1vw;
}

.dropdown2 div.btn2title {
  visibility: hidden;
  width: 30%;
  color: white;
  position: fixed;
  margin-top: 2%;
  margin-left: 46.5vw;
}

.dropdown2:hover div.btn2title {
  visibility: visible;
  font-size: 0.8vw;
}

.button3 {
  position: fixed;
  margin-top: 0%;
  margin-left: 51vw;
  background-color: rgb(247, 0, 255);
  border-radius: 10px;
  border-style: hidden;
  width: 1vw;
  height: 1vw;
}

.dropdown3 div.btn3title {
  visibility: hidden;
  width: 30%;
  color: white;
  position: fixed;
  margin-top: 2%;
  margin-left: 49.2vw;
}

.dropdown3:hover div.btn3title {
  visibility: visible;
  font-size: 0.8vw;
}

.button4 {
  position: fixed;
  margin-top: 0%;
  margin-left: 52.5vw;
  background-color: rgb(111, 0, 255);
  border-radius: 10px;
  border-style: hidden;
  width: 1vw;
  height: 1vw;
}

.dropdown4 div.btn4title {
  visibility: hidden;
  width: 30%;
  color: white;
  position: fixed;
  margin-top: 2%;
  margin-left: 49vw;
}

.dropdown4:hover div.btn4title {
  visibility: visible;
  font-size: 0.8vw;
}

.button5 {
  position: fixed;
  margin-top: 0%;
  margin-left: 54vw;
  background-color: rgb(0, 204, 255);
  border-radius: 10px;
  border-style: hidden;
  width: 1vw;
  height: 1vw;
}

.dropdown5 div.btn5title {
  visibility: hidden;
  width: 30%;
  color: white;
  position: fixed;
  margin-top: 2%;
  margin-left: 50.7vw;
}

.dropdown5:hover div.btn5title {
  visibility: visible;
  font-size: 0.8vw;
}

.button6 {
  position: fixed;
  margin-top: 0%;
  margin-left: 55.5vw;
  background-color: rgb(229, 255, 0);
  border-radius: 10px;
  border-style: hidden;
  width: 1vw;
  height: 1vw;
}

.dropdown6 div.btn6title {
  visibility: hidden;
  width: 30%;
  color: white;
  position: fixed;
  margin-top: 2%;
  margin-left: 53.2vw;
}

.dropdown6:hover div.btn6title {
  visibility: visible;
  font-size: 0.8vw;
}

.button7 {
  position: fixed;
  margin-top: 0%;
  margin-left: 57vw;
  background-color: rgb(0, 4, 255);
  border-radius: 10px;
  border-style: hidden;
  width: 1vw;
  height: 1vw;
}

.dropdown7 div.btn7title {
  visibility: hidden;
  width: 30%;
  color: white;
  position: fixed;
  margin-top: 2%;
  margin-left: 55.8vw;
}

.dropdown7:hover div.btn7title {
  visibility: visible;
  font-size: 0.8vw;
}

.dropdown {
  position: relative;
  margin-top: 4%;
  margin-left: 20%;
}

.dropdown-content {
  display: none;

  position: relative;
  background-color: #f1f1f100;
  width: 0px;
  margin-top: 55%;
  margin-left: 15%;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 5;
}
.show {
  display: block;
  flex-wrap: nowrap;
  position: relative;
}

.dropdown2 {
  position: relative;
  margin-top: 4%;
  margin-left: 2%;
}

.dropdown3 {
  position: relative;
  margin-top: 4%;
  margin-left: 2%;
}

.dropdown4 {
  position: relative;
  margin-top: 4%;
  margin-left: 2%;
}

.dropdown5 {
  position: relative;
  margin-top: 4%;
  margin-left: 2%;
}

.dropdown6 {
  position: relative;
  margin-top: 4%;
  margin-left: 2%;
}

.dropdown7 {
  position: relative;
  margin-top: 4%;
  margin-left: 2%;
}