/* This CSS stylesheet specifically refers to just Counselors, About Us, and  Career Opportunities 
    - counselors.html
    - counselors.js
    - aboutus.html
    - jobs.html
*/

/*Counselors HTML & JS*/
.counselor-zone{
    margin-bottom: 10px;
}

.Card-Cordinator{
    text-align: center;
}

.uncover_anim{
    width: 1;
}
/* Animation that plays to open up a card*/

.counselor-data{
    display: flex;
    flex-wrap: wrap;
}

.name-card{
    display: flex; 
    border: solid black 1px; 
    border-radius: 10px; 
    margin: 5px 20px; 
    background-color: lightgray; 
    height: 450px;
    width: 250px;
}

.display{
    border: solid black 2px; 
    border-radius: 10px; 
    background-color: darkgray;
}

.name{
    text-align: center; 
    font-weight: bold;
}

.image-300{
    width: 250px;
    height: 300px;
}

.display-info{
    overflow-y: auto; 
    padding: 5px;
}

.paragraph-info{
    margin-bottom: 25px;
}

.paragraph-title{
    padding-bottom: 0; 
    margin-bottom: 0; 
    text-decoration: underline;
}

.center{
    text-align: center;
}

.counselor-header{
    text-align: center; 
    background-color: grey; 
    font-weight: bold; 
    padding: 5px 5px;
}

.active{
    width: auto;
}

.inactive{
    overflow: hidden;
}

#Counselor-Layout{
    width: 80%; 
    margin-left: 10%; 
    margin-right: 10%;
}

/* About Us HTML */







/* Jobs HTML */

.page-button{
    width: auto;
    font-size: larger;
    padding: 3px 5px;
    border: 2px solid black;
    border-radius: 5px;
    text-decoration: none;
    margin: auto
    
}
.page-button.space-2{
    margin: 20px auto;

}

.testimonial-card{
    width: 44%; 
    margin: 20px 3%; 
    border: 1px solid black; 
    border-radius: 15px; 
    padding: 10px; 
    text-align: center;
    background-color: lightgrey;
}

/* 576px-767px (small) */
@media (max-width: 767px) {

}

/* 768px-991px (medium) */
@media (min-width: 768px) and (max-width: 991px) {

}

/* 992px-1199px (large) */
@media (min-width: 992px) and (max-width: 1199px) {
    
}

/* screens greater than 1199px (x-large) */
@media (min-width: 1200px) {

}