@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; */
}
#backgroundGman {
	background-image: url("images/fsGman_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:25vw;
  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 */
}
#piano{
position: absolute;
top:60vw;
left: 15vw;
z-index: 0;
}
#animalBox{
position: absolute;
top:50vw;
left: 30vw;
z-index: 2;
}
#tromBox{
position: absolute;
top:30vw;
left: 15vw;
z-index: 1;
}
#gTrombone {
  position: absolute;
  left: 2vw;
  top: 32vw;
  animation-name: trombMarch;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function:linear;
z-index: 1;
}
@keyframes trombMarch {
  0% {left: 2vw;
    position: absolute;
    transform: rotateY(0deg);
  }
  49% {left: 58vw;
    transform: rotateY(0deg);
  }
  50% {left: 58vw;
    transform: rotateY(180deg);
  }
  99% {left: 2vw;
    transform: rotateY(180deg);
  }
  100% {left: 2vw;;
    position: absolute;
    transform: rotateY(0deg);
  }
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
#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: 2;
}
/* 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: 35vw;
  margin: auto;
  grid-area: 4/1/5/7;
  /* row 4 - 5, column 1 -7 ie full width */
}

#tubaBox{
position: absolute;
top:138vw;
left: 40vw;
z-index: 2;
}
#gTuba {
  position: absolute;
  left: 80vw;
  top: 140vw;
  animation-name: tubaMarch;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function:linear;
z-index: 3;
}
@keyframes tubaMarch {
  0% {left: 58vw;
    position: absolute;
    transform: rotateY(0deg);
  }
  49% {left: 2vw;
    transform: rotateY(0deg);
  }
  50% {left: 2vw;
    transform: rotateY(180deg);
  }
  99% {left: 58vw;
    transform: rotateY(180deg);
  }
  100% {left: 58vw;;
    position: absolute;
    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: 5;
}
/* 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 */
}

#gitBox {
  position: absolute;
  left:10vw;
  top: 240vw;
  animation-name: gitDancing;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  z-index: 1;
}
@keyframes gitDancing {
  0% {left: 10vw;
    position: absolute;
  transform: rotate(20deg);
  }
  50% {left: 60vw;
    position: absolute;
  transform: rotate(-20deg);
  }
  100% {left: 10vw;
    position: absolute;
  transform: rotate(20deg);
  }
}
#dupliBox{
position: absolute;
top:270vw;
left: 30vw;
z-index: 2;
}
#sheetBox {
  position: absolute;
  left:40vw;
  top: 272vw;
  animation-name: sheetDancing;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  z-index: 3;
}
@keyframes sheetDancing {
  0% {  left:45vw;
    top: 272vw;
  transform: rotate(0deg)scale(0.3);
  }
  40% {
    top: 265vw;
transform: rotate(20deg)scale(1);
  }
  50% {left:70vw;
transform: rotate(50deg)scale(1);
  }
  100% {left: 70vw;
    top: 300vw;
  transform: rotate(70deg)scale(0);
  }
}
#fendBox {
  position: absolute;
  left: 2vw;
  top: 260vw;
  animation-name: fender;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  z-index: 1;
}
@keyframes fender {
  0% {left: 2vw;
      top: 260vw;
    position: absolute;
    transform: scale(1);
    transform: rotate(10deg);
  }
  25% {
      top: 265vw;
    transform: scale(.75);
      transform: rotate(0deg);
  }
  50% {left: 68vw;
      top: 260vw;
    position: absolute;
    transform: scale(1);
      transform: rotate(-110deg);
  }
  75% {
      top: 265vw;
    transform: scale(.75);
    transform: rotate(0deg);
  }
  100% {left: 2vw;
      top: 260vw;
    position: absolute;
    transform: scale(1);
    transform: rotate(10deg);
  }
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
#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: 3;
}
/* 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 */
}

#gBox {
  position: absolute;
  left:15vw;
  top: 369vw;
  animation-name: gDancing;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  z-index: 5;
}
@keyframes gDancing {
  0% {left: 13vw;
    top: 369vw;
  transform: rotate(90deg);
  }

  49% {left: 70vw;
  transform: rotate(90deg);
  top: 369vw;
  }
  50% {left: 70vw;
  transform: rotate(0deg);
  top: 365vw;
  }

  99% {left: 18vw;
  top: 365vw;
  transform: rotate(0deg);
  }
  100% {left: 18vw;
  top: 369vw;
  transform: rotate(2deg);
  }
}
#cymbalBox {
  position: absolute;
  left:20vw;
  top: 366vw;
  animation-name: cymbal;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  z-index: 1;
  animation-timing-function: linear;
}
@keyframes cymbal {
  0% {
  transform: rotate(0deg);
  }

  100% {
  transform: rotate(360deg);
  }
}
#rickBox {
  position: absolute;
  left:10vw;
  top: 390vw;
  animation-name: rickenbacker;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  z-index: 5;
  animation-timing-function: linear;
}
@keyframes rickenbacker {
  0% {left: 10vw;
    top: 390vw;
  transform: rotate(0deg);
  }

  49% {
  transform: rotate(0deg);
  top: 390vw;
  }
  50% {left: 60vw;
  transform: rotate(182deg);
  top: 393vw;
  }

  99% {left: 10vw;
  transform: rotate(182deg);
  top: 393vw;
  }
  100% {left: 10vw;
  transform: rotate(360deg);
  top: 390vw;
  }
}

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


#spikeBox {
  position: absolute;
  left:10vw;
  top: 475vw;
  animation-name: spikeDancing;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  z-index: 5;
}
@keyframes spikeDancing {
  0% {left: 10vw;
  }
  50% {left: 65vw;
  }
  100% {left: 10vw;
  }
}
#spike6Box{
position: absolute;
top:480vw;
left: 14vw;
z-index: 2;
}

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


#kBassBox {
  position: absolute;
  left:20vw;
  top: 575vw;
  animation-name: kBass;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  z-index: 7;
}
@keyframes kBass {
  0% {transform: rotate(0deg);
    left:25vw;
  }
  30% {transform: rotate(-50deg);
    top: 570vw;
    left:20vw;
  }
  50% {transform: rotate(-20deg);
    left:25vw;
  }
  70% {transform: rotate(-30deg);
    top: 565vw;
    left:25vw;
  }


  100% {transform: rotate(0deg);
    left:25vw;
  }
}
#ampBox{
position: absolute;
top:573vw;
left: 63vw;
transform: rotate(10deg);
z-index: 2;
}
#gTrombone2{
position: absolute;
top:564vw;
left: 40vw;
z-index: 1;
}
#mtbbBox{
position: absolute;
top:568vw;
left: 14vw;
z-index: 2;
}

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

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

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



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

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