.grid {
  background-image: url("../img/layout_grid.png");
  background-repeat: repeat; }

.grid-v {
  background-image: url("../img/layout_grid_v.png");
  background-repeat: repeat;
  background-position: 0% 0%; }

.media-indicators {
  color: #fff; }

.media-indicators .media-indicator {
  text-align: center;
  padding: .25rem 0;
  font-weight: 600; }

.media-xl, .media-lg, .media-md, .media-sm, .media-xs {
  background-color: #333;
  display: none; }

@media (min-width: 1200px) {
  .media-xl {
    display: block;
    background-color: #ff2899; }

  .interactive {
    color: #ff2899; } }
@media (min-width: 992px) and (max-width: 1199.98px) {
  .media-lg {
    display: block;
    background-color: #0000c2; }

  .interactive {
    color: #0000c2; } }
@media (min-width: 768px) and (max-width: 991.98px) {
  .media-md {
    display: block;
    background-color: #00a0ff; }

  .interactive {
    color: #00a0ff; } }
@media (min-width: 576px) and (max-width: 767.98px) {
  .media-sm {
    display: block;
    background-color: #02b300; }

  .interactive {
    color: #02b300; } }
@media (max-width: 575.98px) {
  .media-xs {
    display: block;
    background-color: #fa5300; }

  .interactive {
    color: #fa5300; } }
.green {
  background-color: rgba(0, 139, 69, 0.5) !important; }

.yellow {
  background-color: #f8ae00 !important; }

.magenta {
  background-color: rgba(255, 0, 255, 0.5) !important; }
.code {
  color: #e83e8c !important;
  margin:0; }
.sky {
  background-color: #66ffff !important; }

.blue {
  background-color: #3399ff !important; }

.pink {
  background-color: #f35e7e !important; }

.gray {
  background-color: #e5e5e5 !important; }