@media only screen and (max-width: 800px) {

      .col-s-1 {grid-column-end: span 1;}
      .col-s-2 {grid-column-end: span 2;}
      .col-s-3 {grid-column-end: span 3;}
      .col-s-4 {grid-column-end: span 4;}
      .col-s-5 {grid-column-end: span 5;}
      .col-s-6 {grid-column-end: span 6;}
      .col-s-7 {grid-column-end: span 7;}
      .col-s-8 {grid-column-end: span 8;}
      .col-s-9 {grid-column-end: span 9;}
      .col-s-10 {grid-column-end: span 10;}
      .col-s-11 {grid-column-end: span 11;}
      .col-s-12 {grid-column-end: span 12;}

      .off-s-0{grid-column-start: 1;}
      .off-s-1{grid-column-start: 2;}
      .off-s-2{grid-column-start: 3;} 
      .off-s-3{grid-column-start: 4;}
      .off-s-4{grid-column-start: 5;}
      .off-s-5{grid-column-start: 6;}
      .off-s-6{grid-column-start: 7;}
      .off-s-7{grid-column-start: 8;}
      .off-s-8{grid-column-start: 9;}
      .off-s-9{grid-column-start: 10;}
      .off-s-10{grid-column-start: 11;}
      .off-s-11{grid-column-start: 12;}
      .off-s-12{grid-column-start: 13;}

      .menu a:hover,
      .menu a,
      .main section,
      .main section:hover {
        background-position-y: 2000px !important;
      }              

      .selected{
        background-color: black !important;
      }

      .main{
        margin-top: 9.5em;
      }

      .main h1{
        font-size: 1.5em;    
        border-top: 5px solid black;
        border-bottom: 5px solid black;
        text-align: center;
        padding-left: 0;
      }

      .main section{
        font-size: 1.5em;
        background-color: white !important;
      }

      .main section:before{
        transform: translateY(100%); 
      }

      /*.logo{ 
        height: 1em;
        left: 0;
        width: auto;
        padding: 5px 30px 0px 30px;
      }*/

      .logo-site{
        padding-right: 2em;
        padding-bottom: 1em;
        width: 100%;
      }

      .menu{
        top: 5em;
        width: 100%;
      }

      .menu div{
        align-items: initial;
        
      }

.menu div::before{
  transform: translateY(1000%); 
    transition: transform 0.5s ease; 
}

  .menu div:hover::before {
    transform: translateY(1000%); 
    transition: transform 0.5s ease; 
  }


      .menu a{
        padding-top: 14px;
        border-top: 5px solid black;
        
        font-size: 1.5em;
      }

  

      .performers{
        margin-top: 1em;
      }
}