.locationJob{
    border: 1px solid #fff;
    background: #fff0;
    color: #fff;
    padding: 10px 16px;
    border-radius: 4px;
    margin: 0 8px 8px 0;
}
.JobStateButton{
    display: inline-block";
}
.locationJob:hover{
    color: #FFFFFF;
    background-color: #FF3204;
    border-color: #FF0000;
}

.hot-container.hot-jobs {
    /*display: grid;*/
    /*grid-template-columns: [col1] 25% [col2] 25% [col3] 25% [col4] 25%;*/
    /*grid-gap: 10px;*/
    /*grid-template-rows: [row1] 47% [row2] 47%;*/
    /*text-align: center;*/
    /*color: #FFF;*/


    display: grid;
  
    grid-gap: 22px;
    text-align: center;
    color: #FFF;
}
#hot-grid-0 .jobLogo{
    width:28%;
    margin: auto 0;
}
 .jobLogo{
    width:28%;
     margin: auto 0;
}
 .job-descriptions{
     text-align: left;
     margin-left: 10px;
 }
.job-grid-cell {
    color:#000;
    box-shadow: 0px 0px 10px 0px rgba(88.5, 88.5, 88.5, 0.5);
    background-color: #FFF;
    padding: 12px;
    border-radius: 6px;
    display: inline-flex;
}

@media screen and (min-width: 992px) {
 .hot-container.hot-jobs {
    grid-template-columns: [col1] 23.5% [col2] 23.5% [col3] 23.5% [col4] 23.5%;
 
}
}
@media screen and (max-width: 992px) {
 .hot-container.hot-jobs {


    grid-template-columns: [col1] 50% [col2] 50% 
 
}
}


@media screen and (max-width: 769px) {
 .hot-container.hot-jobs {
   
    grid-template-columns: [col1] 100% 
   
}
}