@media only screen and (max-width: auto) {
/* Styles */
.btn_style_1 {
    /* display: none; */
    color: #000;
    border-color: #ffcb00;
    background: #ffcb00;
    /*border-width: 3px;*/
    /* padding: 16px 25px; */
    font-weight: 400;
    margin-bottom:10px;
    /*font-size: 12px;*/
    /* line-height: 18px; */
    border-radius: 2em;
    padding:2px 4px;
    font-size:80%;
    line-height: 1;
    border-radius:3px;

}
.btn_style_1:hover {
    background: #000;
    border-color: #000;
    color: #fff;
}

.btn_style_4 {
    color: #ffcb00;
    border-color: #212529;
    background: #212529;
    border-width: 3px;
    padding: 16px 25px;
    font-weight: 800;
    font-size: 14px;
    line-height: 23px;
    border-radius: 2em;
}

.btn_style_4 i {
    color: red;
}
}
 
/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */

 
/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}
 
/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}
 
/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}
 
/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}
 
/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}
 
/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}