.rotary-banner {

    display: grid; 
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ; 
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr ; 
    gap: 1px 1px; 
    grid-template-areas: 
      ". . . . . . . . . . ."
      ". . . . . . . . . . ."
      ". . . . . . . . . . ."
      ". . . . . . . . . . ."
      ". . . . . . . . . . ."; 
  }

.box {
    height: 105px;
    width: 105px;
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: contain;
    transition: all .2s ease-in-out;
    filter: brightness(50%); 
}


.box:hover {
    transform: scale(1.05);
}

.blank-box {
    height: 105px;
    width: 105px;
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: contain;
    transition: all .2s ease-in-out;



}

.box1 {
    background-image: url("../images/4-way.jpg");
    grid-column: 1 / 3;
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: contain;
    transition: all .2s ease-in-out;
}
.box2 {
    background-image: url("../images/is-1.jpg");
}
.box3 {
    background-image: url("../images/is-2.jpg");
    
}
.box4 {
    background-image: url("../images/will-3.jpg");
}
.box5 {
   background-image: url("../images/will-4.jpg"); 
}
.box10 {
    background-image: url("../images/7-areas.jpg");
    grid-column: 1 / 3;
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: contain;
    transition: all .2s ease-in-out;
}
.box11 {
    background-image: url("../images/promoting-1.jpg");
}
.box12 {
    background-image: url("../images/fighting-1.jpg");        
}
.box13 {
    background-image: url("../images/providing-1.jpg");
}
.box14 {
    background-image: url("../images/saving-1.jpg");
}
.box15 {
    background-image: url("../images/supporting-2.jpg");
}
.box16 {
    background-image: url("../images/growing-1.jpg");
}
.box17 {
    background-image: url("../images/supporting-1.jpg");
}
.box19 {
    background-image: url("../images/8-p.jpg");
    grid-column: 1 / 3;
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: contain;
    transition: all .2s ease-in-out;
}
.box20 {
    background-image: url("../images/well-8.jpg");
}
.box21 {
    background-image: url("../images/equitable-8.jpg");
}
.box22{
    background-image: url("../images/free-8.jpg");
}
.box23 {
    background-image: url("../images/good-8.jpg");
}
.box24 {
    background-image: url("../images/high-8.jpg");
}
.box25 {
    background-image: url("../images/acceptance-8.jpg");
}
.box26 {
    background-image: url("../images/low-8.jpg");
}
.box27 {
    background-image: url("../images/sound-8.jpg");
}
.box28 {
    background-image: url("../images/17-goals.jpg");
    grid-column: 1 / 3;
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: contain;
    transition: all .2s ease-in-out;
}
.box29 {
    background-image: url("../images/1.jpg")
}
.box30 {
    background-image: url("../images/2.png");
}
.box31 {
    background-image: url("../images/3.png");
}
.box32 {
    background-image: url("../images/4.png");
}
.box33 {
    background-image: url("../images/5.png");
}
.box34 {
    background-image: url("../images/6.png");
}
.box35 {
    background-image: url("../images/7.png");
}
.box36 {
    background-image: url("../images/8.png");
}
.boxlogo {
    background-image: url("../images/rotary-logo-1.jpg");
    grid-column: 1 / 4;
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: contain;
    transition: all .2s ease-in-out;
}

.box37 {
    background-image: url("../images/9.png");
}
.box38 {
    background-image: url("../images/10.png");
}
.box39 {
    background-image: url("../images/11.png");
}
.box40 {
    background-image: url("../images/12.png");
}
.box41 {
    background-image: url("../images/13.png");
}
.box42 {
    background-image: url("../images/14.png");
}
.box43 {
    background-image: url("../images/15.png");
}
.box44 {
    background-image: url("../images/16.png");
}
.box45 {
    background-image: url("../images/17.png");
}

.on {
    filter: brightness(100%);

}

@media only screen 
and (max-width : 1180px) {
  .box {
      height: 110px;
      width: 110px;
      background-position: center; 
      background-repeat: no-repeat; 
      background-size: contain;
      transition: all .2s ease-in-out;

  }
  .blank-box{ 
      height: 110px;
      width: 110px;
      background-position: center; 
      background-repeat: no-repeat; 
      background-size: contain;
      transition: all .2s ease-in-out;
  }

}

@media only screen 
and (max-width : 1200px) {
  .box {
      height: 80px;
      width: 80px;
      background-position: center; 
      background-repeat: no-repeat; 
      background-size: contain;
      transition: all .2s ease-in-out;
  }
  .blank-box{ 
    height: 80px;
    width: 80px;
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: contain;
    transition: all .2s ease-in-out;
}

}

@media only screen 
and (max-width : 930px) {
  .box {
      height: 60px;
      width: 60px;
      background-position: center; 
      background-repeat: no-repeat; 
      background-size: contain;
      transition: all .2s ease-in-out;
  }
  .blank-box{ 
    height: 60px;
    width: 60px;
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: contain;
    transition: all .2s ease-in-out;
}
}

@media only screen 
and (max-width : 800px) {
  .box {
      height: 45px;
      width: 45px;
      background-position: center; 
      background-repeat: no-repeat; 
      background-size: contain;
      transition: all .2s ease-in-out;
  }
  .blank-box{ 
    height: 45px;
    width: 45px;
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: contain;
    transition: all .2s ease-in-out;
}
}