@font-face {
    font-family: 'BROmny';
    src: url('https://educ.rec.br/educarecife/assets/fonts/BROmny-Regular.ttf');
}

.filter_divs{
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;

}
.warm_div{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;

}
.select_warn{
display: none;
justify-content: center;
align-items: center;
flex-direction: column; 
}
.year_buttons{
color: white;
margin: 5px;
white-space: nowrap;
font-family: 'BROmny';
font-size: 20px;
border-radius: 5px;
cursor: pointer;
}
.year_buttons:focus{
background-color: #f27030;
}

.year_buttons:hover{
background-color: #f27030;
}

.video_div{
display: none;
}


@media screen and (max-width: 320px)  { 
     .filter_divs{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        

     }
    .year_buttons{
        color: white;
        margin: 5px;
        white-space: nowrap;
        font-family: 'BROmny';
        font-size: 20px;
        width: 250px;
        border-radius: 5px;
    }
    .select_warn{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column; 
    }


}

@media screen and (max-width: 481px)  {

.filter_divs{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

 }

.year_buttons{
    color: white;
    margin: 5px;
    white-space: nowrap;
    font-family: 'BROmny';
    font-size: 20px;
    width: 250px;
    border-radius: 5px;
}
.select_warn{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; 
    }



}
@media screen and (max-width: 641px) {

.filter_divs{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.year_buttons{
    color: white;
    margin: 5px;
    white-space: nowrap;
    font-family: 'BROmny';
    font-size: 20px;
    width: 250px;
    border-radius: 5px;
}
.select_warn{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; 
}


}

@media screen and (max-width: 823px)  { 

    .filter_divs{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .year_buttons{
        color: white;
        margin: 5px;
        white-space: nowrap;
        font-family: 'BROmny';
        font-size: 20px;
        width: 250px;
        border-radius: 5px;
    }
    .select_warn{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column; 
    }

}