.mentorSelector{
    width: 90%;
    height: 100%;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 10px 10px 100px black;
}

.mentorList{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 5px;
}

.imageList{
    width: 20%;
}

.mentorScreen{
    width: 75%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mentorScreen img{
    width: 80%;
}

.imageList img{
    width: 100%;
    margin: 5px;
    filter: grayscale(100%);
}

.imageList img:hover{
    filter: grayscale(0%);
    border: 3px solid #ff4500;
}

.iamgeList img:active{
    filter: grayscale(0%);
    border: 3px solid #ff4500;
}

#gif{
    filter: blur(10px) grayscale(100%);
    animation-name: none;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
}

@keyframes blurIn{
    from{filter: blur(10px) grayscale(100%);}
    to{filter: blur(0px) grayscale(0%);}
}


.teacherStats{
    display: none;
    flex-direction: row;
    align-items: center;
    width: 100%;
    overflow: hidden;
    padding: 15px;
}


.stats h3{
    font-size: 24px;
    font-weight: 800;
}

.stats p{
    font-size: 16px;
}

.mentorModal {
  display: none; /* Hidden by default */
  position: absolute; /* Stay in place */
  z-index: 1; /* Sit on top */
  margin: auto;
  width: 80%;
  height: 40%;
  top: 20%;
  left: 10%;
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  flex-direction: column;
  border-radius: 20px;
}

/* Modal Content/Box */
.mentorModal-content {
  background-color: black;
  margin: auto; /* 15% from the top and centered */
  padding: 20px;
  width: 100%; /* Could be more or less, depending on screen size */
  height: 100%;
}

.mentorModal-content iframe{
    margin: auto;
}

/* The Close Button */
.mentorClose {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.mentorClose:hover,
.mentorClose:focus {
  color: white;
  text-decoration: none;
  cursor: pointer;
}

@media (min-width: 768px) {
    .mentorSelector{
        height: 80vh;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 80%;;
    }

    .mentorList{
        width: 40%;
    }

    .mentorBio{
        width: 50%;
    }

    .stats h3{
        font-size: 48px;
        font-weight: 800;
    }

    .stats p{
        font-size: 24px;
    }

    .mentorModal {
        display: none; /* Hidden by default */
        position: absolute; /* Stay in place */
        z-index: 1; /* Sit on top */
        margin: auto;
        width: 80%;
        height: 80%;
        top: 10%;
        left: 10%;
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        flex-direction: column;
        border-radius: 20px;
    }

    /* Modal Content/Box */
    .mentorModal-content {
        background-color: black;
        margin: auto; /* 15% from the top and centered */
        padding: 20px;
        width: 100%; /* Could be more or less, depending on screen size */
        height: 100%;
    }
}