/* CSS files add styling rules to your content */


.gallery {
  position: relative;
  max-width: 97vw;
  padding: 0 10;
  font-size: 23px;
  text-align: center;
  font-family: 'system-ui';
}

.gallery_scroller {
   /* snap mandatory on horizontal axis  */
  scroll-snap-type: x mandatory;

  -x: scroll;
  /* -y: hidden; */
    
  display: flex;
  align-items: center;
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  overflow-y: hidden;
  display: flex;
  align-items: center;
  
  /* Enable Safari touch scrolling physics */
  -webkit--scrolling: touch;
}


.gallery_scroller div {
   /* snap align center  */
  scroll-snap-align: center;
  scroll-snap-stop: always;
  margin: 10px;
  position: relative;
  height: 436px;

}

.gallery_scroller img {
  border-radius: 10px;
  margin-top: 17px;
}

.gallery_scroller div.colored_card {
  left: 18px;
  min-width: 82%;
  min-height: 95%;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
 }
  
.gallery_scroller div.colored_card > p {

  margin:15px;
  padding: 0;
}


.gallery div.note {
  position: absolute;

  /* vertically align center */
  top:  50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;

  background: rgba(0,0,0, 0.6);
  padding: 20px;
  position: absolute;


  font-size: 4em;
  color: white;
}


.gallery .btn {
  position: absolute;

  top: 50%;
  transform: translateY(-50%);

  height: 30px;
  width: 30px;

  border-radius: 2px;
  border: #1a237e 1px solid;
  background-color: rgba(0,0,0,0.5);
  background-position: 50% 50%;
  background-repeat: no-repeat;

  z-index: 1;
}

.gallery .btn.next {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg width="18" height="18" viewBox="0 0 34 34" xmlns="http://www.w3.org/2000/svg"><title>Shape</title><path d="M25.557 14.7L13.818 2.961 16.8 0l16.8 16.8-16.8 16.8-2.961-2.961L25.557 18.9H0v-4.2z" fill="%23FFF" fill-rule="evenodd"/></svg>');
  right: 10px;
}

.gallery .btn.prev {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg width="18" height="18" viewBox="0 0 34 34" xmlns="http://www.w3.org/2000/svg"><title>Shape</title><path d="M33.6 14.7H8.043L19.782 2.961 16.8 0 0 16.8l16.8 16.8 2.961-2.961L8.043 18.9H33.6z" fill="%23FFF" fill-rule="evenodd"/></svg>');
  left: 10px;
}





/* ::-webkit-scrollbar {
    width: 0px; 
     background: transparent;
} */


.gallery_scroller > div.colored_card:nth-of-type(1) {background-color: #fafafa; border: 1px solid #e1e1e1; }
.gallery_scroller > div.colored_card:nth-of-type(2) { background-color: #fafafa; border: 1px solid #e1e1e1; }
.gallery_scroller > div.colored_card:nth-of-type(3) { background-color: #fafafa; border: 1px solid #e1e1e1; }
.gallery_scroller > div.colored_card:nth-of-type(4) { background-color: #fafafa; border: 1px solid #e1e1e1;}
.gallery_scroller > div.colored_card:nth-of-type(5) { background-color: #fafafa; border: 1px solid #e1e1e1; }
.gallery_scroller > div.colored_card:nth-of-type(6) { background-color: #fafafa; border: 1px solid #e1e1e1;}
.gallery_scroller > div.colored_card:nth-of-type(7) { background-color: #fafafa; border: 1px solid #e1e1e1; }
.gallery_scroller > div.colored_card:nth-of-type(8) { background-color: #fafafa; border: 1px solid #e1e1e1;}
.gallery_scroller > div.colored_card:nth-of-type(9) { background-color: #fafafa; border: 1px solid #e1e1e1; }
.gallery_scroller > div.colored_card:nth-of-type(10) { background-color: #fafafa; border: 1px solid #e1e1e1; }
  
.gallery_scroller > div.colored_card:nth-of-type(11) { background-color: #827717; }
.gallery_scroller > div.colored_card:nth-of-type(12) { background-color: #9E9D24; }
.gallery_scroller > div.colored_card:nth-of-type(13) { background-color: #AFB42B; }
.gallery_scroller > div.colored_card:nth-of-type(14) { background-color: #C0CA33; }
.gallery_scroller > div.colored_card:nth-of-type(15) { background-color: #CDDC39; }
.gallery_scroller > div.colored_card:nth-of-type(16) { background-color: #D4E157; }
.gallery_scroller > div.colored_card:nth-of-type(17) { background-color: #DCE775; }
.gallery_scroller > div.colored_card:nth-of-type(18) { background-color: #E6EE9C; }
.gallery_scroller > div.colored_card:nth-of-type(19) { background-color: #F0F4C3; }
.gallery_scroller > div.colored_card:nth-of-type(20) { background-color: #F9FBE7; }

.gallery_scroller > div.colored_card:nth-of-type(21) { background: linear-gradient(to right, #f8f8f8, #efefef); }
.gallery_scroller > div.colored_card:nth-of-type(22) { background-color: #9E9D24; }
.gallery_scroller > div.colored_card:nth-of-type(23) { background-color: #AFB42B; }
.gallery_scroller > div.colored_card:nth-of-type(24) { background-color: #C0CA33; }
.gallery_scroller > div.colored_card:nth-of-type(25) { background-color: #CDDC39; }
.gallery_scroller > div.colored_card:nth-of-type(26) { background-color: #D4E157; }
.gallery_scroller > div.colored_card:nth-of-type(27) { background-color: #DCE775; }
.gallery_scroller > div.colored_card:nth-of-type(28) { background-color: #E6EE9C; }
.gallery_scroller > div.colored_card:nth-of-type(29) { background-color: #F0F4C3; }
.gallery_scroller > div.colored_card:nth-of-type(30) { background-color: #F9FBE7; }