.grid.camps{grid-gap:1.5rem}
.grid.camps p{text-align:left}
.grid.camps p img+span{padding-bottom:.8rem}
.grid.camps span.grades {
    margin-bottom: 1rem;
}
.grid.camps>div{border: 2px solid var(--anthracitelightgrey);
    border-radius: .75rem;
    padding-bottom: 1rem;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;}
.page_camps main select{margin:0 .5rem 1rem .2rem;padding:.5rem;min-width:20%}
.grid.camps div a,
.grid.camps p.camp{font-weight:700;display:block;text-decoration:none;height:100%;width:100%}
.grid.camps div a{display: grid;
        height: 100%;
        width: 100%;
        grid-template-rows: subgrid;
        grid-row: span 5;
        gap: 0rem;}
.grid.camps div a:hover{text-decoration:none}
.grid.camps div a:hover span{text-decoration:underline}
.grid.camps p.camp img{border-top-left-radius:.75rem;border-top-right-radius:.75rem}
.grid.camps span{display:block;padding-inline:.8rem}

.grid.camps span span {
    padding-inline: 0;
    display: inline;
}
/*By Default it's 'Summer Camp', so let's not display Summer Camp. Only Display Bootcamp*/
body:not(.school_camps) .grid.camps span span.Summer {
    display: none;
}
.grid.camps span.cDate, .grid.camps span.campus, span.grades{font-style:italic;color:var(--anthracite);font-weight:400}
.grid.camps span.school{color:#8b8b8b;font-weight:400;padding-top:.3rem}
.thefilters{display:grid;grid-template-columns:repeat(5,1fr);margin-bottom:1.5rem;grid-gap:.5rem}
#searchFilter{height:2rem}
.topic_info {display: none !important;}


p.campModalButton {
    text-align: right;
    margin: 0px;
    margin-bottom: 2rem;
}

/* Modal CSS */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1000;
}

.modal:target {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  background: var(--white);
  width: 90%;
  max-width: 600px;
  margin: 10% auto;
  padding: 30px;
  border-radius: 8px;
  position: relative;
}

.close {
  position: absolute;
    text-decoration: none;
    background: url(https://100.lau.edu.lb/_images/close.png?v=2) no-repeat 0 0;
    right: 1rem;
    top: 1rem;
    width: 22px;
    height: 22px;
}
/* Modal CSS */

@media screen and (max-width:640px){
    .thefilters{grid-template-columns:repeat(2,1fr);margin-bottom:0;grid-gap:0}
    .modal-content {
      width:75%;
    }

    #searchFilter {
        margin-bottom: 2rem;
    }
}