:root {

    --white: #fff;
    --orange: #f0ad4e;
}



.staffPhoto {
    display: block;
    width: 100%;
    border-radius: 10px 10px 0 0;

}



ol{
    list-style-type: none;
}





input[type="radio"] {
    position: absolute;
    left: -9999px;
}


/* FILTERS
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
.filters {
    text-align: center;
    margin-bottom: 2rem;
}

.filters * {
    display: inline-block;
}

.filters label {
    padding: 0.5rem 1rem;
    margin-bottom: 0.25rem;
    border-radius: 2rem;
    min-width: 50px;
    line-height: normal;
    cursor: pointer;
    transition: all 0.1s;
    color: white;
}

.filters label:hover {
    background: var(--orange);
    color: var(--white);
}



/* FILTERED ELEMENTS (staffContainer)
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
.staffContainer {
    display: grid;
    grid-gap: 1.5rem;
    padding: 0;
}

.staff {
    background: #29154a;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.staffContainer .staff-title {
    font-size: 1rem;
}

.staffContainer .staffPosition{
    font-size: 0.8rem;
}

.staffContainer .staff-title:hover {
    text-decoration: underline;
}

.staffContainer figcaption {
    padding: 1rem;
}

.staffContainer .staff-categories {
    margin-bottom: 0.75rem;
    font-size: 0.75rem;
}

.staffContainer .staff-categories * {
    display: inline-block;
}



.staffContainer .staff-categories li {
    margin-bottom: 0.5rem;
    padding: 0.3rem 0.6rem;
    border-radius: 1rem;
    border: 1px solid;
    line-height: normal;
    transition: all 0.1s;
}

.staffContainer .staff-categories a:hover {
    background: var(--orange);
    color: var(--white);
}


/* FILTERING RULES
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
[value="All"]:checked~.filters [for="All"],
[value="depHead"]:checked~.filters [for="depHead"],
[value="ict"]:checked~.filters [for="ict"],
[value="english"]:checked~.filters [for="english"],
[value="management"]:checked~.filters [for="management"],
[value="psychology"]:checked~.filters [for="psychology"],
[value="arts"]:checked~.filters [for="arts"] {
    background: var(--orange);
    color: var(--white);
}

[value="All"]:checked~.staffContainer [data-category] {
    display: block;
}

[value="depHead"]:checked~.staffContainer .staff:not([data-category~="depHead"]),
[value="ict"]:checked~.staffContainer .staff:not([data-category~="ict"]),
[value="english"]:checked~.staffContainer .staff:not([data-category~="english"]),
[value="management"]:checked~.staffContainer .staff:not([data-category~="management"]),
[value="psychology"]:checked~.staffContainer .staff:not([data-category~="psychology"]),
[value="arts"]:checked~.staffContainer .staff:not([data-category~="arts"]) {
    display: none;
}



/* MQ
  –––––––––––––––––––––––––––––––––––––––––––––––––– */

@media screen and (max-width: 650px) {
    html {
        font-size: 14px;
    }

}














/* Number of cards to be shown */

 /* Media Query for Mobile Devices */
 @media (max-width: 480px) {
    .staffContainer {
        grid-template-columns: repeat(2, 1fr);
    }



    .staffContainer .staff-title {
        font-size: 0.9rem;
    }

    .staffContainer .staffPosition{
        font-size: 0.6rem;
    }

    .staffContainer .staffQli{
        font-size: 0.4rem;
    }

 }

 /* Media Query for low resolution  Tablets, Ipads */
 @media (min-width: 481px) and (max-width: 767px) {
    .staffContainer {
        grid-template-columns: repeat(3, 1fr);
    }

 }

 /* Media Query for Tablets Ipads portrait mode */
 @media (min-width: 768px) and (max-width: 1024px) {
    .staffContainer {
        grid-template-columns: repeat(3, 1fr);
    }


 }

 /* Media Query for Laptops and Desktops */
 @media (min-width: 1025px) and (max-width: 1280px) {
    .staffContainer {
        grid-template-columns: repeat(4, 1fr);
    }

  
 }

 /* Media Query for Large screens */
 @media (min-width: 1281px) {
    .staffContainer {
        grid-template-columns: repeat(5, 1fr);
    }
 }