header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3fr 1fr 1fr;
  align-items: center;
  justify-items: center;
  text-align: center;
  background-image: url(../img/bandemic.gif);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed; }
  @media only screen and (max-width: 767px) {
    header {
      background-image: url(../img/bandemic.gif); } }

* {
  box-sizing: border-box; }

.slideUp {
  animation-name: slideUp;
  animation-duration: .7s;
  animation-fill-mode: forwards; }

.slideDown {
  animation-name: slideDown;
  animation-duration: .4s;
  animation-fill-mode: forwards; }

@keyframes slideUp {
  0% {
    transform: translateY(0%); }
  100% {
    transform: translateY(-110%); } }
@keyframes slideDown {
  0% {
    transform: translateY(-100%); }
  100% {
    transform: translateY(0%); } }
body {
  width: 80%;
  margin: 3rem auto;
  background-image: url(../img/index.png);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed; }
  @media only screen and (max-width: 767px) {
    body {
      background-image: none;
      background-color: #222222;
      background-attachment: none; } }

nav h1 {
  color: #fff;
  font-size: 2rem;
  margin: 0 0 1rem; }
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2; }
  @media screen and (min-width: 40em) {
    nav ul {
      columns: 4; } }
  @media screen and (min-width: 64em) {
    nav ul {
      columns: 5; } }
  nav ul li {
    margin-bottom: 1rem; }
    nav ul li img {
      width: 100%;
      border: .25rem solid #fff; }

.message img {
  width: 100px;
  height: 100px; }

main h1, img {
  grid-column: 1; }
  @media only screen and (max-width: 767px) {
    main h1, img {
      grid-column: 1;
      grid-row: 1; } }

main img {
  width: 300px;
  height: 300px; }
  @media only screen and (max-width: 767px) {
    main img {
      grid-column: 1;
      grid-row: 3; } }

main p, h4, h2 {
  grid-column: 2 / span 2;
  margin-right: 25rem; }
  @media only screen and (max-width: 767px) {
    main p, h4, h2 {
      margin-right: none;
      grid-column: 1;
      grid-row: 2; } }

.green2 img {
  width: 300px;
  height: 100px; }

.post2 img {
  width: 300px;
  height: 100px; }

.vert2 img {
  width: 300px;
  height: 100px; }

.blink2 img {
  width: 300px;
  height: 100px; }

.ratm2 img {
  width: 300px;
  height: 100px; }

.teurs2 img {
  width: 300px;
  height: 100px; }

.wayne2 img {
  width: 300px;
  height: 100px; }

.boy2 img {
  width: 300px;
  height: 100px; }

.wiz2 img {
  width: 300px;
  height: 100px; }

.mcr2 img {
  width: 300px;
  height: 100px; }

.linkin2 img {
  width: 300px;
  height: 100px; }

.overlay-content {
  font-family: 'Montserrat', sans-serif;
  color: #ffffff;
  position: fixed;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  justify-items: center;
  text-align: justify;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  padding: 2rem;
  transform: translateY(100%);
  transition: all .4s; }
  @media only screen and (max-width: 767px) {
    .overlay-content {
      position: none;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      width: 100vw;
      height: 100vh; } }

.overlay-content2 {
  font-family: 'Montserrat', sans-serif;
  color: #ffffff;
  position: fixed;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  justify-items: center;
  text-align: justify;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  padding: 2rem;
  transform: translateY(100%);
  transition: all .4s; }
  @media only screen and (max-width: 767px) {
    .overlay-content2 {
      width: 100vw;
      height: 100vh; } }

.overlay-content3 {
  font-family: 'Montserrat', sans-serif;
  color: #ffffff;
  position: fixed;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  justify-items: center;
  text-align: justify;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  padding: 2rem;
  transform: translateY(100%);
  transition: all .4s; }
  @media only screen and (max-width: 767px) {
    .overlay-content3 {
      width: 100vw;
      height: 100vh; } }

.overlay-content4 {
  font-family: 'Montserrat', sans-serif;
  color: #ffffff;
  position: fixed;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  justify-items: center;
  text-align: justify;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  padding: 2rem;
  transform: translateY(100%);
  transition: all .4s; }
  @media only screen and (max-width: 767px) {
    .overlay-content4 {
      width: 100vw;
      height: 100vh; } }

.overlay-content5 {
  font-family: 'Montserrat', sans-serif;
  color: #ffffff;
  position: fixed;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  justify-items: center;
  text-align: justify;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  padding: 2rem;
  transform: translateY(100%);
  transition: all .4s; }
  @media only screen and (max-width: 767px) {
    .overlay-content5 {
      width: 100vw;
      height: 100vh; } }

.overlay-content6 {
  font-family: 'Montserrat', sans-serif;
  color: #ffffff;
  position: fixed;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  justify-items: center;
  text-align: justify;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  padding: 2rem;
  transform: translateY(100%);
  transition: all .4s; }
  @media only screen and (max-width: 767px) {
    .overlay-content6 {
      width: 100vw;
      height: 100vh; } }

.overlay-content7 {
  font-family: 'Montserrat', sans-serif;
  color: #ffffff;
  position: fixed;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  justify-items: center;
  text-align: justify;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  padding: 2rem;
  transform: translateY(100%);
  transition: all .4s; }
  @media only screen and (max-width: 767px) {
    .overlay-content7 {
      width: 100vw;
      height: 100vh; } }

.overlay-content8 {
  font-family: 'Montserrat', sans-serif;
  color: #ffffff;
  position: fixed;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  justify-items: center;
  text-align: justify;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  padding: 2rem;
  transform: translateY(100%);
  transition: all .4s; }
  @media only screen and (max-width: 767px) {
    .overlay-content8 {
      width: 100vw;
      height: 100vh; } }

.overlay-content9 {
  font-family: 'Montserrat', sans-serif;
  color: #ffffff;
  position: fixed;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  justify-items: center;
  text-align: justify;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  padding: 2rem;
  transform: translateY(100%);
  transition: all .4s; }
  @media only screen and (max-width: 767px) {
    .overlay-content9 {
      width: 100vw;
      height: 100vh; } }

.overlay-content10 {
  font-family: 'Montserrat', sans-serif;
  color: #ffffff;
  position: fixed;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  justify-items: center;
  text-align: justify;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  padding: 2rem;
  transform: translateY(100%);
  transition: all .4s; }
  @media only screen and (max-width: 767px) {
    .overlay-content10 {
      width: 100vw;
      height: 100vh; } }

.overlay-content11 {
  font-family: 'Montserrat', sans-serif;
  color: #ffffff;
  position: fixed;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  justify-items: center;
  text-align: justify;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  padding: 2rem;
  transform: translateY(100%);
  transition: all .4s; }
  @media only screen and (max-width: 767px) {
    .overlay-content11 {
      width: 100vw;
      height: 100vh; } }

.show-content {
  transform: translateY(0); }

/*# sourceMappingURL=main.css.map */