/* Large Screen Devices max-xl:  (1280px)     */

@media (min-width: 1200px) {
  .container {
    max-width: 1300px;
  }
}

/* @media screen and (max-width: 1200px) {
} */

/*Tablet max-md:    (768px)    */

@media screen and (max-width: 768px) {
  [aria-controls="navbarDropdown"] {
    display: flex;
  }

  [aria-expanded="false"] ~ .main-nav {
    display: none;
  }

  [aria-expanded="true"] ~ .main-nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: var(--s-300);
    width: 100%;
    background-color: var(--db);
  }

  .nav-top-banner {
    justify-content: space-between;
  }

  .navbar-toggler {
    display: block;
    position: fixed;
    background-color: #ffffff00;
    color: black;
    z-index: 1000;
  }

  .main-nav {
    margin-top: var(--s-120);
    margin-bottom: var(--s-40);
    position: absolute;
    top: var(--s-15);
    align-items: center;
    justify-content: space-evenly;
    padding: 0 var(--s-50);
    flex-direction: column;
  }

  .main-nav ul {
    margin: 0 0 -65px 0;
  }

  .nav-logo {
    position: relative;
    margin-right: 400px;
  }

  .new-moon:hover img {
    filter: drop-shadow(0 0 20px whitesmoke);
  }

  .new-moon:hover {
    box-shadow: none;
  }

  .banner-home-section {
    background-position: 60% 20%;
  }

  #moonfest-v {
    font-size: 3em;
  }
}

@media (max-width: 763px) {
  #canv {
    scale: 0.7;
  }

  nav {
    order: -1;
    perspective: 800px;
  }

  [aria-expanded="true"] ~ .right {
    display: grid;
    max-height: 500px;
    transform: rotateX(0px);
  }

  [aria-controls="menu-list"] {
    display: block;
    margin-bottom: 10px;
  }

  [aria-expanded="false"] .close {
    display: none;
  }
  [aria-expanded="true"] .close {
    display: inline-block;
  }

  [aria-expanded="true"] .open {
    display: none;
  }
}

/*Mobile Phone max-[560px]: max-[400px]:    */

@media screen and (max-width: 560px) {
  [aria-expanded="true"] ~ .main-nav {
    height: var(--s-400);
    background-color: var(--db);
  }

  [aria-expanded="true"] ~ .main-nav ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    width: 100%;
  }

  .nav-logo {
    position: relative;
    margin-right: 278px;
  }

  .banner-home-section {
    background-position: 71% 20%;
  }
}

@media (max-width: 550px) {
  #canv {
    scale: 0.5;
    margin-bottom: -35px;
  }

  .buy-tickets-btn {
    width: 180px;
    height: 40px;
  }

  .cat-photos img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .cat-cont {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .contact-sec {
    display: flex;
    flex-direction: column;
    margin: 0px;
    padding: 0px;
  }

  .concert-contact {
    margin: 0px;
    padding: 10px;
  }
}

@media screen and (max-width: 400px) {
  .nav-logo {
    position: relative;
    margin-right: 180px;
  }
}