* { box-sizing: border-box; }

/* force scrollbar */
html { overflow-y: scroll; }


/* ---- grid ---- */



/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* fluid 5 columns */
.grid-sizer,
.grid-item { width: 33.33%; padding:4px;}
/* 2 columns */
.grid-item--width2 { width: 66.66%; }
.grid-item img {width:100%;display: block;}

.grid-item {float:left;}
#artists-filter a {margin:2px;}


/* modal styles */
.modal p {color:#ffffff;margin-top: 13px;}
.modal a {color:#50b0ff;}
.modal {background-color:#131313;padding:8px;max-width: 800px;width:auto;}
.modal a.close-modal {top: 10px;right: 10px;}

.modal img {max-height: 80vh;}

.generic-button-2021 {cursor: pointer;padding: 10px 30px;height:fit-content;}
a.filter-selected {background-color: #333!important;color: #ccc!important;cursor:auto;border-color: #333;}


.grid-item a {display: block;}

.grid-item a .nombre {
display:block;
opacity: 0;
position:absolute;
bottom:0;
width:100%;
text-align: left;
background-color: rgba(0, 85, 135, 0.6);
color:#ffffff;
padding: 12px 16px;
max-width: 100%;
width: -webkit-fill-available;
margin-right: 4px;
margin-bottom: 4px;
text-transform: uppercase;
font-size: 2rem;

-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}

.grid-item a:hover .nombre {opacity: 1;}


@media (max-width: 768px) {
.grid-sizer, .grid-item { width: 50%; padding:4px;}
.grid-item--width2 { width: 100%; }
.grid-item a .nombre {opacity: 1;font-size: 1.6rem;}
}

.artists-page .generic-button-2021 {
  border: 2px solid #005585!important;
  color: #005585!important;
}
.artists-page .generic-button-2021:hover, .artists-page a.filter-selected {
  border: 2px solid #005585!important;
  background-color: #005585!important;
  color: #ffffff!important;
}