* {
    box-sizing: border-box;
    }
  
  
  
  body{
      background-color: #f8f8f8;
  }
  
#main{
  position:relative;
  overflow-y: scroll;
}

 

  
  #photos {
     /* Prevent vertical gaps */
     line-height: 0;
     -webkit-column-count: 5;
     -webkit-column-gap:   0px;
     -moz-column-count:    5;
     -moz-column-gap:      0px;
     column-count:         5;
     column-gap:           0px;
     margin: 0;
     padding: 0;
     color:yellow;
  
  }
  #photos img {
    /* Just in case there are inline attributes */
    width: 100% !important;
    height: 0% !important;
  }

  .banner, .click{
        position: absolute;
        z-index: 999;
        margin: 0 auto;
        padding: 0 0;
        left: 0;
        right: 0;
        
        height:30px;
        background-color: purple;
        width: 80%;
        text-align-last: center;  
  }

  .banner {
    top:30vh; 
  }

  .click {
    top:70vh; 
  }

  .click a{
    background-color: white;
    color: purple;
    font-weight: bolder;
  }


  .banner p, .click p{
    font-size: x-small;
    color: white;
    font-weight: bolder;
    margin: 5px auto;
  }

  @media (min-width: 1200px) {
   .banner, .click {
    width:50%;
   }
  }
  
  @media (max-width: 1200px) {
   
    #photos {
    -moz-column-count:    4;
    -webkit-column-count: 4;
    column-count:         4;
    }
  }
  @media (max-width: 1000px) {
    #photos {
    -moz-column-count:    3;
    -webkit-column-count: 3;
    column-count:         3;
    }
  }
  @media (max-width: 800px) {
    .banner, .click {
      width:90%;
     }
    #photos {
    -moz-column-count:    2;
    -webkit-column-count: 2;
    column-count:         2;
    }
  }
  @media (max-width: 300px) {
    .banner, .click {
      width:95%;
     }
    #photos {
    -moz-column-count:    1;
    -webkit-column-count: 1;
    column-count:         1;
    }
  }