#css_media_debugger::before {
    display: none;
    position: fixed;
    left: 50%;
    top: 0px;
    width: 100px;
    height: 20px;
    color: white;
    background-color: black;
    content: "not defined";
    padding: 3px;
    font-size: 10px;
    text-align: center;
    margin-left: -50px;
    line-height: 200%;
    opacity: 0.5;

}
#css_media_debugger:hover::before {
    opacity: 1;
}
@media (min-width: 1px) and (max-width: 350px) {
    #css_media_debugger::before { content: "0 - 350";}

}

@media (min-width:351px) and (max-width: 576px) {
    #css_media_debugger::before { content: "351 - 576";}

}

@media (min-width: 577px) and (max-width: 768px) {
    #css_media_debugger::before { content: "577 - 768";}

}

@media (min-width: 769px) and (max-width: 992px) {
    #css_media_debugger::before { content: "769 - 922";}
}

@media (min-width: 993px) and (max-width: 1200px) {
    #css_media_debugger::before { content: "993 - 1200";}
}

@media (min-width: 1201px) and (max-width: 1440px) {
    #css_media_debugger::before { content: "1201 - 1440";}
}

@media (min-width: 1441px) and (max-width: 1600px) {
    #css_media_debugger::before { content: "1441 - 1600";}
}

@media (min-width: 1601px) and (max-width: 1920px) {
    #css_media_debugger::before { content: "1601 - 1920";}
}

@media (min-width: 1921px) {
    #css_media_debugger::before { content: "1920+";}
}

/*


and (orientation: landscape) {

}
*/