/* Extra-small devices (portrait phones, 544px and up) (0.5)*/
@media (max-width: 576px) {
    .break-indicator:before {content: "EXTRA SMALL";}
}

/* Small devices (landscape phones, 544px and up) (0.6)*/
@media (min-width: 576px) {
    .break-indicator:before {content: "SMALL";}
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint (0.75)*/
@media (min-width: 768px) {
    .break-indicator:before {content: "MEDIUM";}
}

/* Large devices (desktops, 992px and up) (0.9) */
@media (min-width: 992px) {
    .break-indicator:before {content: "LARGE";}
}

/* Extra large devices (large desktops, 1200px and up) (1.0)*/
@media (min-width: 1200px) {
    .break-indicator:before {content: "EXTRA LARGE";}
}

.break-indicator {
    height: 30px;
    background-color: #000;
    color: #eee;
    text-align: center;

}