.inst_title {
    text-transform: uppercase;
    font-weight: bold;
    margin-top: 40px;
    text-align: center;
    font-size: 20px;
}
.list_of_inst {
    width:100%;
    margin:5% 2%;
    display: inline-block;
}
@media only screen and (max-width: 667px) {
    .list_of_inst{
         width:100%;
    }
}
.item_of_inst{
     width:100%;
     height:150px;
     margin-top: 10px;
     margin-bottom: 20px;
}
 
@media only screen and (max-width: 667px) {
    .item_of_inst {
         height:auto;
    }
}
.img_of_inst{
     height: 120px;
     width:120px; 
     float:left;
     background-size:contain;
     background-repeat: no-repeat; 
     border-radius: 10px;
     border:1px solid black;
}
.img_of_inst:hover{
    filter: opacity(70%);
}
@media only screen and (max-width: 1370px) {
    .img_of_inst{
         margin:none;
    }
}
@media only screen and (max-width: 667px) {
    .img_of_inst{
        height: 80px;
        width:80px;
    }
}
.content_of_inst{
     display:inline-block;
     width:72%;
     height:120px;
     border-radius: 10px;
     background-color: lightgray;
     text-align: center;
}
.content_of_inst:hover{
    background-color: #e6e6e6;
}
@media only screen and (max-width: 667px) {
    .content_of_inst{
        height: 80px;
    }
}
.name_of_inst{
     color:black;
     font-weight: bold;
     font-size: 25px;
     margin:10px;
     display: inline-block;
}
.name_of_inst:hover{
    color:orange;
}
@media only screen and (max-width: 1370px) {
    .name_of_inst{
         font-size: 20px;
    }
}    
.price_of_inst{
     color:black;
     font-weight: bold;
     font-size: 25px;
     margin:10px;
     display: inline-block;
}
@media only screen and (max-width: 667px) {
    .price_of_inst{
         font-size: 20px;
    }
}    
